/* * The Rails Guild, Console Ledger design system. * Replaces the scaffold application.css entirely. Propshaft-ready, no preprocessing. * Load order inside this file matters: tokens, then element base, then components. * Webfonts are declared in fonts.css (vendored woff2, see HANDOFF.md step 1). */ /* ===== colors.css ===== */ /* The Rails Guild tokens, v3 "Console Ledger": black leather, engraved gold, ruby verification gems. Variable names kept stable across versions. */ :root{ /* Base surfaces (dark) */ --parchment:#0e0b07;--parchment-deep:#1a1409;--parchment-bright:#171106;--parchment-shadow:#000; --line:rgba(212,164,55,.28);--line-strong:#8a681f; --ink:#f0e6d0;--ink-soft:#c4b28c;--ink-faint:#8a7a58; /* Gold, the accent */ --wax:#d4a437;--wax-dark:#8a681f;--wax-bright:#f2ce74; --gold:#a8863c;--gold-dark:#6f5518;--gold-bright:#e9c467; /* Ruby, verification only */ --ruby:#c9163f;--ruby-dark:#8f0e2b;--ruby-bright:#ff5f7e; --moss:#c9163f;--moss-dark:#8f0e2b; /* Semantic */ --surface-page:var(--parchment);--surface-card:var(--parchment-bright);--surface-inset:var(--parchment-deep); --text-body:var(--ink);--text-muted:var(--ink-soft);--text-faint:var(--ink-faint);--text-on-wax:#171006; --accent:var(--wax);--accent-hover:var(--wax-bright); --link:var(--wax);--link-hover:var(--wax-bright); --border-default:var(--line);--border-strong:var(--line-strong);--border-ink:var(--gold); --verified:var(--ruby);--verified-bright:var(--ruby-bright);--unverified:var(--ink-faint); --flash-notice-bg:var(--parchment-deep);--flash-notice-border:var(--ruby); --flash-alert-bg:var(--parchment-deep);--flash-alert-border:var(--wax); --error-text:var(--wax-bright); --focus-ring:var(--wax); --glow:rgba(212,164,55,.45);--glow-soft:rgba(212,164,55,.22);--glow-ruby:rgba(225,29,72,.45); } /* Light theme: same gold-and-ruby system on warm paper. Set data-theme="light" on . */ [data-theme="light"]{ --parchment:#faf6ea;--parchment-deep:#f1e9d2;--parchment-bright:#fffdf5;--parchment-shadow:#e6dcbf; --line:rgba(138,104,31,.3);--line-strong:#8a681f; --ink:#241c0e;--ink-soft:#5c4e2e;--ink-faint:#8a7a58; --wax:#8a681f;--wax-dark:#6f5518;--wax-bright:#a8863c; --gold:#8a681f;--gold-dark:#6f5518;--gold-bright:#6f5518; --ruby:#b0102f;--ruby-dark:#8f0e2b;--ruby-bright:#8f0e2b; --moss:#b0102f;--moss-dark:#8f0e2b; --text-on-wax:#fffdf5; --glow:rgba(168,134,60,.35);--glow-soft:rgba(168,134,60,.18);--glow-ruby:rgba(176,16,47,.25); } /* ===== typography.css ===== */ /* IBM Plex Mono everywhere, the dev-guild voice. Georgia retained only as a fallback stack. */ :root{ --font-serif:Georgia,'Times New Roman',serif; --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --font-rank:var(--font-mono); --text-xs:.7rem;--text-sm:.8rem;--text-md:.95rem;--text-lg:1.05rem;--text-xl:1.35rem;--text-2xl:2rem;--text-3xl:2.6rem; --leading-tight:1.25;--leading-body:1.6; --tracking-caps:.08em; --letterpress:none; /* @kind other */ --letterpress-deep:none; /* @kind other */ } /* ===== spacing.css ===== */ :root{ --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem; --radius-sm:0;--radius-md:2px;--radius-full:50%; --measure:38rem;--page-max:64rem; } /* ===== effects.css ===== */ :root{ /* Flat frames + gem glow. Gold hairlines are the structure; glow is reserved for gems and focus. */ --shadow-card:none; --shadow-inset:none; /* The 1px rim keeps the silhouette's edges reading at full width on the black ground. */ --seal-rim:drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 1px var(--gold)); --seal-glow:var(--seal-rim) drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 7px var(--glow)); /* The crest's exact silhouette, traced from logo.png; percentages scale with the seal box. */ --seal-shape:polygon(50.00% 0.00%,56.53% 3.83%,62.13% 6.23%,69.22% 8.63%,77.99% 10.70%,83.77% 11.66%,90.86% 12.46%,100.00% 12.94%,100.00% 37.38%,99.25% 46.49%,97.76% 53.83%,96.46% 58.15%,92.91% 66.29%,89.74% 71.57%,85.26% 77.32%,80.60% 82.11%,75.93% 86.10%,71.08% 89.62%,63.62% 94.09%,57.46% 97.12%,49.63% 100.00%,43.84% 97.76%,35.07% 93.45%,30.04% 90.42%,23.32% 85.62%,18.47% 81.31%,13.81% 76.36%,11.38% 73.32%,7.65% 67.57%,5.04% 62.30%,2.99% 56.87%,1.49% 51.28%,0.56% 46.01%,0.00% 40.42%,0.00% 12.94%,13.81% 11.98%,21.08% 10.86%,28.17% 9.27%,38.99% 5.75%,45.15% 2.88%); --rule-major:1px solid var(--gold);--rule-double:1px solid var(--gold);--rule-hairline:1px solid var(--line); --focus-outline:1px solid var(--focus-ring); } /* ===== base.css ===== */ *{box-sizing:border-box} body{margin:0;color:var(--text-body);font-family:var(--font-mono);font-size:var(--text-md);line-height:var(--leading-body);background:var(--parchment)} h1,h2,h3,h4{font-family:var(--font-mono);font-weight:600;line-height:var(--leading-tight);color:var(--text-body);margin:0 0 var(--space-3)} h1{font-size:var(--text-2xl)} h2{font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.08em} h2::before{content:"// ";color:var(--gold)} h3{font-size:1rem} p{margin:0 0 var(--space-3)} a{color:var(--link);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px} a:hover{color:var(--link-hover);text-decoration-color:currentColor} code{font-family:var(--font-mono);font-size:.85em;background:var(--surface-inset);border:var(--rule-hairline);border-radius:var(--radius-md);padding:.1em .35em;color:var(--text-muted)} small{font-size:var(--text-sm);color:var(--text-faint)} hr{border:0;border-top:var(--rule-major);margin:var(--space-5) 0} :focus-visible{outline:var(--focus-outline);outline-offset:2px} ::selection{background:var(--wax);color:var(--parchment)} label{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.04em;text-transform:lowercase} input[type="text"],input[type="email"],input[type="search"],input[type="url"],input[type="number"],textarea,select{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-body);background:transparent;border:1px solid var(--line);border-radius:0;padding:var(--space-2) var(--space-3);width:100%;max-width:var(--measure)} input::placeholder,textarea::placeholder{color:var(--text-faint);opacity:1} input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--gold);outline-offset:0} input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--wax)} input[type="file"]{font-family:var(--font-mono);font-size:var(--text-sm)} /* Consent sits outside the lowercase label convention: it is a legal notice and has to read as written. */ .consent{max-width:var(--measure)} .consent label{display:inline;text-transform:none;letter-spacing:normal;font-size:var(--text-sm);color:var(--text-body);line-height:1.5} /* ===== guild.css ===== */ /* Guild components, Console Ledger. */ .button,button,input[type="submit"]{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:var(--text-sm);color:var(--gold-bright);background:transparent;border:1px solid var(--gold);border-radius:0;padding:var(--space-2) var(--space-4);cursor:pointer;text-decoration:none;text-transform:lowercase;white-space:nowrap;line-height:1.3} .button:hover,button:hover,input[type="submit"]:hover{background:var(--gold);color:var(--parchment)} .button--secondary{color:var(--text-muted);border-color:var(--line)} .button--secondary:hover{background:transparent;border-color:var(--gold);color:var(--gold-bright)} .button--quiet{color:var(--text-faint);border-color:transparent;font-weight:400;text-decoration:underline;text-decoration-color:var(--line)} .button--quiet:hover{background:transparent;color:var(--gold-bright)} /* Chrome */ .page{max-width:var(--page-max);margin:0 auto;padding:0 var(--space-5)} .site-header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:var(--space-4) 0;border-bottom:1px solid var(--gold)} .site-header nav{display:flex;gap:1rem;align-items:baseline} .site-header__brand{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--text-body);text-decoration:none} .site-header__brand{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap} .site-header__brand:hover{color:var(--gold-bright)} .site-header nav a{color:var(--text-muted);text-decoration:none;font-size:var(--text-sm);padding:var(--space-2) 0;white-space:nowrap} .site-header nav a:hover{color:var(--gold-bright)} .site-header nav form{display:inline} .site-header nav button{background:none;border:0;padding:var(--space-2) 0;margin:0;color:var(--text-muted);font-weight:400;text-transform:none;font-size:var(--text-sm);cursor:pointer;white-space:nowrap} .site-header nav button:hover{background:none;color:var(--gold-bright)} .site-header__logo{height:1.5em;width:auto;vertical-align:middle} .site-footer{margin-top:var(--space-8);padding:var(--space-5) 0;border-top:var(--rule-hairline);color:var(--text-faint)} .site-footer small{color:var(--text-faint);font-size:var(--text-xs)} .site-footer__patrons{display:flex;flex-wrap:wrap;column-gap:var(--space-4);row-gap:var(--space-1);font-size:var(--text-xs);margin-bottom:var(--space-4)} .site-footer__patrons span{color:var(--gold);letter-spacing:.04em} .site-footer__patrons a{color:var(--text-faint);text-decoration-color:var(--line)} .site-footer__patrons a:hover{color:var(--gold-bright)} .site-footer__patrons a:last-child{color:var(--text-muted);font-style:italic} .site-footer__links{display:flex;gap:var(--space-4);font-size:var(--text-xs);margin-bottom:var(--space-3)} .site-footer__links a{color:var(--text-faint);text-decoration-color:var(--line)} .site-footer__links a:hover{color:var(--gold-bright)} /* Fine print; muted rather than faint because it sits below 12px. */ .site-footer__disclaimer small{font-size:.6rem;color:var(--text-muted)} /* Patrons page: the same ten plaques, gallery-hung */ .patrons-page{margin-top:var(--space-6)} .patrons-page>p{max-width:var(--measure)} .patrons{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--space-4);margin:var(--space-5) 0 var(--space-6)} /* Legal pages */ .legal{margin-top:var(--space-6);max-width:var(--measure)} .legal h2{margin-top:var(--space-6)} .legal ul{padding-left:var(--space-5)} .legal li{margin-bottom:var(--space-2)} /* Hero: a boxed frame with a starship prompt */ .hero{border:1px solid var(--gold);margin-top:var(--space-5);padding:var(--space-6) var(--space-4);text-align:center} .hero h1{font-size:var(--text-2xl)} .hero__mark{margin:0 auto var(--space-3)} .hero__mark img{height:110px;width:auto} .hero p{max-width:var(--measure);margin:0 auto var(--space-4);color:var(--text-muted)} .hero__tagline{font-size:var(--text-lg);color:var(--text-body);margin-bottom:var(--space-2)} .hero__sub{font-size:var(--text-sm);color:var(--text-muted)} /* Flash */ .flash{padding:var(--space-3) var(--space-4);border:1px solid;border-radius:0;font-family:var(--font-mono);font-size:var(--text-sm);margin:var(--space-3) 0} .flash--notice{background:var(--flash-notice-bg);border-color:var(--flash-notice-border);color:var(--ruby-bright)} .flash--alert{background:var(--flash-alert-bg);border-color:var(--flash-alert-border);color:var(--wax-bright)} .errors{background:var(--surface-inset);border:1px solid var(--wax);border-radius:0;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);color:var(--wax-bright);font-size:var(--text-sm)} .errors ul{margin:0;padding-left:var(--space-4)} /* Avatars: square, metal-set */ .avatar{border-radius:2px;object-fit:cover;border:1px solid var(--gold);background:var(--surface-inset)} .avatar--card{width:36px;height:36px} .avatar--profile{width:160px;height:160px;border-radius:4px} .avatar--monogram{display:inline-flex;align-items:center;justify-content:center;color:var(--gold-bright);font-weight:600} .avatar--monogram.avatar--card{font-size:.9rem} .avatar--monogram.avatar--profile{font-size:3rem} /* Profile page */ .profile{margin-top:var(--space-6)} /* Rank */ .rank{font-family:var(--font-mono);font-weight:600;text-transform:lowercase;color:var(--gold-bright)} .card__rank,.profile__rank{color:var(--text-muted);font-size:var(--text-xs)} .card__rank .rank,.profile__rank .rank{font-size:1.1em} /* Directory: one line per developer */ .directory{display:flex;gap:var(--space-6);align-items:flex-start} .directory__main{flex:1} .directory__sidebar{width:14rem} .directory__list{display:block} @media (max-width:640px){.directory{flex-direction:column}.directory__sidebar{width:100%} .site-header{flex-wrap:wrap;row-gap:var(--space-1)} .card{flex-wrap:wrap;row-gap:var(--space-1)} .card p:not(.card__rank){flex-basis:100%;order:3;padding-left:calc(36px + var(--space-3))} .card__rank{order:2} .hero{padding:var(--space-5) var(--space-3)}} .card{display:flex;align-items:center;gap:var(--space-4);width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:var(--space-3) var(--space-2);text-align:left} .card:hover{background:var(--surface-inset)} .card>a{display:flex;align-items:center;gap:var(--space-3);flex:none;text-decoration:none;color:inherit} .card h3{margin:0;font-size:1rem} .card>a:hover h3{color:var(--gold-bright)} .card p{margin:0;font-size:var(--text-sm);color:var(--text-muted)} .card__rank{margin-left:auto;text-align:right;white-space:nowrap} /* Sponsor plaque */ .placement{border:1px dashed var(--gold);border-radius:0;padding:var(--space-4);text-align:left;background:transparent} .placement::before{content:"patron of the guild";display:block;font-size:var(--text-xs);letter-spacing:.04em;text-transform:lowercase;color:var(--gold);margin-bottom:var(--space-2)} .placement a{font-weight:600;color:var(--text-body);text-decoration:none} .placement a:hover{color:var(--gold-bright)} /* Badges: gems cut to the crest's shield. Glow sits on the seal span, the clip on its ::before, because a drop-shadow on the clipped element itself would be cut off. */ .badge{display:flex;align-items:center;gap:var(--space-3);list-style:none;margin:0 0 var(--space-3);font-size:var(--text-sm)} .badge__seal{flex:none;filter:var(--seal-glow)} .badge__seal::before{content:attr(data-seal);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:51px;padding-bottom:6px;font-family:var(--font-mono);font-weight:600;font-size:1rem;color:rgba(255,255,255,.9);text-shadow:0 0 8px rgba(255,255,255,.4);background:linear-gradient(135deg,var(--wax-bright) 0%,var(--wax) 45%,var(--wax-dark) 100%);clip-path:var(--seal-shape)} .badge--in-production .badge__seal{filter:var(--seal-rim) drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(176,141,87,.3))} .badge--in-production .badge__seal::before{background:linear-gradient(135deg,#c7a06a 0%,#8a6a3a 55%,#4a3a1e 100%);color:rgba(0,0,0,.65);text-shadow:0 1px 1px rgba(255,255,255,.35)} .badge--founding-member .badge__seal{filter:var(--seal-rim) drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--glow))} .badge--founding-member .badge__seal::before{background:linear-gradient(135deg,#fff 0%,var(--wax-bright) 25%,var(--wax) 55%,var(--wax-dark) 90%)} /* Verification marks: ruby when verified, the word always stays */ .product__mark{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;text-transform:lowercase;border:1px solid;border-radius:0;padding:.1em .5em;white-space:nowrap} .product__mark--verified{color:var(--ruby-bright);border-color:var(--ruby);text-shadow:0 0 10px var(--glow-ruby)} .product__mark--unverified{color:var(--unverified);border-color:var(--line);border-style:dashed} /* Token line */ .token-line{display:flex;align-items:stretch;gap:var(--space-2);max-width:var(--measure)} .token-line code{flex:1;display:flex;align-items:center;padding:var(--space-2) var(--space-3);overflow-x:auto;white-space:nowrap;font-size:var(--text-sm)} .token-line button{flex:none;font-size:var(--text-xs);padding:var(--space-2) var(--space-3)} /* Sponsor rails: TrustMRR-style flanking inventory, guild-dressed */ .rails{display:grid;grid-template-columns:15rem minmax(0,1fr) 15rem;gap:var(--space-6);align-items:start;max-width:96rem;margin:0 auto;padding:0 var(--space-5)} .rails>.page{max-width:var(--page-max);padding:0;min-width:0} .sponsor-rail{display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:var(--space-5);padding-top:var(--space-5)} .sponsor-rail__label{font-size:var(--text-xs);letter-spacing:.04em;text-transform:lowercase;color:var(--gold);margin:0} .sponsor{border:1px solid var(--line);padding:var(--space-3);text-align:center} .sponsor:hover{border-color:var(--gold)} .sponsor__logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--gold);border-radius:2px;color:var(--gold-bright);font-weight:600;margin-bottom:var(--space-2)} .sponsor__logo img{width:100%;height:100%;object-fit:contain} .sponsor a{display:block;font-weight:600;color:var(--text-body);text-decoration:none} .sponsor a:hover{color:var(--gold-bright)} .sponsor p{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--text-muted)} .sponsor--empty{border-style:dashed} .sponsor--empty:hover{border-color:var(--gold)} .sponsor--empty .sponsor__logo{border-style:dashed;color:var(--text-faint)} .sponsor--empty a{font-weight:400;font-style:italic;color:var(--text-muted);text-decoration:underline;text-decoration-color:var(--line)} .sponsor--empty a:hover{color:var(--gold-bright)} .sponsor--empty p{color:var(--text-faint)} .sponsor-rail__cta{font-size:var(--text-xs);color:var(--text-faint);text-align:center;text-decoration:underline;text-decoration-color:var(--line)} .sponsor-rail__cta:hover{color:var(--gold-bright)} @media (max-width:1100px){ .rails{display:flex;flex-direction:column;padding:0 var(--space-5) 5.5rem} .rails>.page{order:1} .sponsor-rail{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;scrollbar-width:thin} .sponsor-rail__label{display:none} .sponsor-rail--left{order:0;border-bottom:var(--rule-hairline)} .sponsor-rail--right{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:10;background:var(--parchment);border-top:1px solid var(--gold);padding:var(--space-2) var(--space-3);margin:0} .sponsor-rail .sponsor{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);text-align:left} .sponsor-rail .sponsor__logo{width:24px;height:24px;margin:0;font-size:.7rem;flex:none} .sponsor-rail .sponsor a{font-size:var(--text-sm);white-space:nowrap} .sponsor-rail .sponsor p{display:none} .sponsor-rail__cta{flex:0 0 auto;align-self:center;white-space:nowrap}} /* Globe */ .globe{max-width:100%;height:auto} .globe-frame{display:inline-block;padding:var(--space-4);background:var(--surface-inset);border:1px solid var(--gold);border-radius:0}