/* * Omarchy Guild design system, adapted from The Rails Guild's Console Ledger. * 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). * * Placeholder palette pending the A2 design note: dark-first, tuned to sit next * to a Tokyo Night desktop screenshot. Variable names are kept identical to the * Rails Guild sheet (parchment/wax/gold/ruby) so components port cleanly; only * the hues differ. Swap tokens here, never in components. */ /* ===== colors.css ===== */ :root{ /* Base surfaces (dark) */ --parchment:#1a1b26;--parchment-deep:#16161e;--parchment-bright:#1f2335;--parchment-shadow:#000; --line:rgba(122,162,247,.24);--line-strong:#3d59a1; --ink:#c0caf5;--ink-soft:#a9b1d6;--ink-faint:#565f89; /* Blue, the accent */ --wax:#7aa2f7;--wax-dark:#3d59a1;--wax-bright:#b4c4fa; --gold:#5d7ab8;--gold-dark:#3d59a1;--gold-bright:#9bb2ef; /* Green, verification only */ --ruby:#9ece6a;--ruby-dark:#73a944;--ruby-bright:#c5ea9b; --moss:#9ece6a;--moss-dark:#73a944; /* 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:#16161e; --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(122,162,247,.45);--glow-soft:rgba(122,162,247,.22);--glow-ruby:rgba(158,206,106,.45); /* Globe: read by the canvas, so the theme still owns every colour on it. */ --globe-ocean:#16161e;--globe-land:#3d59a1;--globe-grid:rgba(122,162,247,.14); --globe-dot:#9ece6a;--globe-halo:rgba(158,206,106,.7); } /* Light theme: same system on daylight surfaces. Set data-theme="light" on . */ [data-theme="light"]{ --parchment:#e1e2e7;--parchment-deep:#d5d6db;--parchment-bright:#f2f3f7;--parchment-shadow:#c8c9ce; --line:rgba(46,125,233,.3);--line-strong:#2e7de9; --ink:#343b58;--ink-soft:#4c536e;--ink-faint:#8990b3; --wax:#2e7de9;--wax-dark:#1f5bb8;--wax-bright:#4a91f0; --gold:#2e7de9;--gold-dark:#1f5bb8;--gold-bright:#1f5bb8; --ruby:#587539;--ruby-dark:#455c2e;--ruby-bright:#455c2e; --moss:#587539;--moss-dark:#455c2e; --text-on-wax:#f2f3f7; --glow:rgba(46,125,233,.35);--glow-soft:rgba(46,125,233,.18);--glow-ruby:rgba(88,117,57,.25); --globe-ocean:#d5d6db;--globe-land:#2e7de9;--globe-grid:rgba(46,125,233,.2); --globe-dot:#587539;--globe-halo:rgba(88,117,57,.55); } /* ===== typography.css ===== */ /* IBM Plex Mono everywhere, the terminal 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; --letterpress-deep:none; } /* ===== 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. 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 dark 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)); /* A clean heater shield, symmetric on purpose: it belongs to no logo, so a future Omarchy Guild mark can replace it without ever having matched it. */ --seal-shape:polygon(50% 0%,58% 3%,70% 6.5%,84% 9%,100% 10.5%,100% 42%,98.5% 52%,95% 62%,89% 72%,80.5% 81.5%,69% 90%,50% 100%,31% 90%,19.5% 81.5%,11% 72%,5% 62%,1.5% 52%,0% 42%,0% 10.5%,16% 9%,30% 6.5%,42% 3%); --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. */ .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)} .prompt-empty{color:var(--text-muted)} .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__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)} /* 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 */ .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)} .hero form{display:flex;justify-content:center;gap:var(--space-2);max-width:24rem;margin:0 auto} /* 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} /* Member 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 filter bar */ .filter-bar{display:flex;gap:var(--space-2);align-items:center;margin:var(--space-5) 0 var(--space-4);flex-wrap:wrap} .filter-bar input[type="search"]{max-width:16rem} .filter-bar select{width:auto;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-body);background:var(--parchment);border:1px solid var(--line);padding:var(--space-2) var(--space-3)} /* Directory: one line per member */ .directory{display:flex;gap:var(--space-6);align-items:flex-start} .directory__main{flex:1} .directory__list{display:block} @media (max-width:640px){.directory{flex-direction:column} .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} /* Claims list on settings */ .claims{list-style:none;padding:0;max-width:var(--measure)} .claims li{padding:var(--space-2) 0;border-bottom:1px solid var(--line)} .claims form{display:inline;margin-left:var(--space-2)} .claim__status{font-size:var(--text-xs);letter-spacing:.04em;text-transform:lowercase;border:1px solid;border-radius:0;padding:.1em .5em;white-space:nowrap;margin-left:var(--space-2)} .claim__status--verified{color:var(--ruby-bright);border-color:var(--ruby)} .claim__status--pending{color:var(--text-muted);border-color:var(--line);border-style:dashed} .claim__status--rejected{color:var(--wax-bright);border-color:var(--wax)} details{max-width:var(--measure);margin-bottom:var(--space-3)} details summary{cursor:pointer;color:var(--gold-bright);font-size:var(--text-sm)} /* Leaderboard: the one numeric page */ .leaderboard{margin:var(--space-5) 0;padding-left:var(--space-5);max-width:var(--measure)} .leaderboard li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line)} .leaderboard li::marker{color:var(--gold);font-size:var(--text-sm)} .leaderboard a{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;flex:1} .leaderboard a:hover .leaderboard__name{color:var(--gold-bright)} .leaderboard__score{margin-left:auto;font-weight:600;color:var(--gold-bright)} /* Contributions list */ .contributions li{margin-bottom:var(--space-2)} .contributions small{margin-left:var(--space-2)} /* Setups wall: screenshots are the hero */ .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-4);margin:var(--space-5) 0} .wall__card a{display:block;text-decoration:none;color:inherit} .wall__card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);display:block} .wall__card a:hover img{border-color:var(--gold)} .wall__card h3{margin:var(--space-2) 0 0;font-size:var(--text-md)} .wall__card a:hover h3{color:var(--gold-bright)} .wall__card p{margin:0;font-size:var(--text-xs);color:var(--text-muted)} .wall__placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border:1px dashed var(--line);color:var(--text-faint);font-size:var(--text-2xl)} .home-door{margin-top:var(--space-7)} /* Setup page */ .setup{margin-top:var(--space-6)} .setup__shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--space-3);margin:var(--space-4) 0} .setup__shots button{padding:0;border:1px solid var(--line);background:none} .setup__shots button:hover{border-color:var(--gold);background:none} .setup__shots img{width:100%;display:block} .setup__specs{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);max-width:var(--measure);margin:var(--space-4) 0} .setup__specs dt{font-size:var(--text-xs);color:var(--text-muted);text-transform:lowercase} .setup__specs dd{margin:0;font-size:var(--text-sm)} .setup__notes{max-width:var(--measure)} .lightbox{border:1px solid var(--gold);background:var(--parchment);padding:var(--space-2);max-width:92vw;max-height:92vh} .lightbox::backdrop{background:rgba(0,0,0,.8)} .lightbox img{max-width:100%;max-height:86vh;display:block} /* Badges: gems cut to the 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)} /* Globe: a canvas beside the same roster in words. The list is the fallback, so it stays readable on its own and the canvas only ever selects into it. */ .globe{display:flex;gap:var(--space-6);align-items:flex-start;margin:var(--space-5) 0} .globe__canvas{flex:none;width:min(30rem,52vw);aspect-ratio:1;touch-action:none;cursor:grab} .globe__canvas:active{cursor:grabbing} .globe__canvas:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .globe__roster{flex:1;min-width:0;list-style:none;margin:0;padding:0;max-height:min(30rem,52vw);overflow-y:auto} .globe__entry{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);font-size:var(--text-sm);cursor:default} .globe__entry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px} .globe__entry.is-selected{background:var(--surface-inset);border-left:2px solid var(--globe-dot)} .globe__handle,.globe__place{color:var(--text-muted);font-size:var(--text-xs);margin-left:var(--space-2)} .globe__anonymous{color:var(--text-faint);font-style:italic} .globe__entry--empty{color:var(--text-faint)} .globe__cta{font-size:var(--text-sm)} .hero__globe{font-size:var(--text-sm)} /* The picker on the member form: the same globe, one dot, and fields that can do the job on their own for anyone not using a pointer. */ .globe-picker{border:1px solid var(--line);border-radius:0;padding:var(--space-4);margin:var(--space-5) 0;max-width:var(--measure)} .globe-picker legend{font-size:var(--text-sm);color:var(--gold-bright);padding:0 var(--space-2)} .globe-picker p{font-size:var(--text-sm)} .globe-picker .globe__canvas{width:min(22rem,70vw);margin:var(--space-3) 0} .globe-picker__readout{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} .globe-picker__readout span{font-family:var(--font-mono);color:var(--gold-bright)} .globe-picker__fields{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap} .globe-picker__fields input{width:7rem} @media (max-width:720px){.globe{flex-direction:column} .globe__canvas{width:min(30rem,86vw)} .globe__roster{max-height:none;width:100%}} /* ===== ascii wordmark ===== */ /* The banner replaces the hero's frame on the homepage, so that variant drops the border. font-size:min(11px,1.3vw) keeps the 102-column art inside the page and shrinks it on narrow viewports. */ .hero--banner{border:0} .ascii-banner{font-family:var(--font-mono);font-size:min(11px,1.3vw);line-height:1.15;margin:0 auto;display:inline-block;text-align:left;background:linear-gradient(180deg,var(--wax-bright),var(--wax) 55%,var(--wax-dark));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:pre} /* ASCII sparkles on the wordmark: few, small, come and go. The wrap holds only the 
, so a sparkle never lands on the tagline. */
.ascii-banner-wrap{position:relative;display:inline-block}
.ascii-sparkle{position:absolute;font-size:1.15rem;color:var(--wax-bright);pointer-events:none;user-select:none;opacity:0;text-shadow:0 0 6px var(--glow)}
@keyframes guild-sparkle{0%,100%{opacity:0;transform:scale(.5)}45%,60%{opacity:.9;transform:scale(1)}}
/* Hotkeys: space is always reserved (visibility, not display) so revealing
   them never shifts layout. */
.hotkey{visibility:hidden;display:inline-block;font-family:var(--font-mono);font-size:.65rem;font-weight:600;color:var(--wax);border:1px solid var(--wax-dark);background:var(--surface-inset);padding:0 .45em;margin-left:.5em;vertical-align:1px}
.show-hotkeys .hotkey{visibility:visible}
.hotkey-hint{visibility:hidden;font-size:var(--text-xs);color:var(--text-faint)}
.show-hotkeys .hotkey-hint{visibility:visible}
/* TUI: a block cursor after the hero tagline */
.tui-cursor{display:inline-block;width:.55em;height:1.05em;background:var(--wax);vertical-align:text-bottom;margin-left:.15em}
@keyframes guild-blink{50%{opacity:0}}
/* Row selection marker: reserved gutter, filled on hover like a TUI list */
.card>a h3::before{content:"  ";white-space:pre;color:var(--wax)}
.card:hover>a h3::before{content:"> "}
/* Contribution lists read as a tree */
.contributions{list-style:none;padding-left:var(--space-2)}
.contributions li::before{content:"├──  ";color:var(--gold)}
.contributions li:last-child::before{content:"└──  "}
/* Empty states speak shell */
.prompt-empty::before{content:"$ ";color:var(--ruby)}
/* Leaderboard score bars */
.scorebar{font-size:.75rem;color:var(--wax);letter-spacing:-.05em}
.scorebar .off{color:var(--wax-dark);opacity:.45}
/* The sparkles and the cursor are the only animations in the system, and both
   stand down for anyone who asks for less motion: the sparkle spans still
   spawn and expire, they just never fade in, and the cursor holds steady. */
@media (prefers-reduced-motion:no-preference){
.ascii-sparkle{animation:guild-sparkle 2.4s ease-in-out both}
.tui-cursor{animation:guild-blink 1.1s steps(1) infinite}}