/* ============================================================ RSBS — Brand Operations. Dark premium theme. Palette: near-black + bone white, single magenta accent Type: Syne (display) · Hanken Grotesk (body) · IBM Plex Mono (labels) · Jost (wordmark) ============================================================ */ :root { --ink: #0A0A0B; --ink-2: #0D0D0F; --surface: #141418; --surface-2: #1A1A20; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.16); --bone: #F3F1EC; --bone-dim: #C6C5C0; --mute: #82828B; --magenta: #E6007E; --magenta-2: #FF2E8F; --magenta-ghost: rgba(230,0,126,0.14); --glow: 0 0 44px rgba(230,0,126,0.35); /* ---- TYPEFACES — swap these two lines to change the whole site ---- Options loaded in the HTML : Archivo · Space Grotesk · Inter Tight (see font-lab.html to compare them live) */ --font-display: "Archivo", system-ui, sans-serif; /* headings */ --font-body: "Inter", system-ui, sans-serif; /* body copy */ --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-mark: "Jost", system-ui, sans-serif; --container: 1240px; --pad-x: clamp(20px, 5vw, 64px); --sect-y: clamp(78px, 11vh, 156px); --radius: 4px; --ease: cubic-bezier(.2,.7,.2,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: 17px; line-height: 1.65; letter-spacing: -0.005em; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--magenta); color: #fff; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-x); } .section { padding-block: var(--sect-y); position: relative; } .section--tight { padding-block: clamp(56px,8vh,110px); } .bg-alt { background: var(--ink-2); } .hr { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- Type ---------- */ h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; margin: 0; } .display { font-size: clamp(2.7rem, 7vw, 6.4rem); font-weight: 800; line-height: 0.97; letter-spacing: -0.042em; } .h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); letter-spacing:-0.03em; } .h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing:-0.02em; } .lead { font-size: clamp(1.08rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--bone-dim); font-weight: 400; } p { margin: 0 0 1em; } .muted { color: var(--mute); } .dim { color: var(--bone-dim); } strong { font-weight: 600; color: var(--bone); } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--magenta); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; } .eyebrow::before{ content:""; width: 26px; height:1px; background: var(--magenta); display:inline-block; opacity:.7; } .eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--magenta); display:inline-block; opacity:.7; } .kicker { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--mute); } /* magenta highlight inside headings */ .accent { color: var(--magenta); } .italic { font-style: italic; } /* ---------- Buttons ---------- */ .btn { --b: var(--magenta); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 15px 26px; border-radius: 100px; border: 1px solid transparent; background: var(--b); color: #fff; cursor: pointer; transition: box-shadow .3s var(--ease), transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); will-change: transform; } .btn:hover { background: var(--magenta-2); box-shadow: var(--glow); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .arw { transition: transform .3s var(--ease); } .btn:hover .arw { transform: translateX(4px); } .btn--ghost { background: transparent; color: var(--bone); border-color: var(--line-2); } .btn--ghost:hover { background: transparent; border-color: var(--magenta); color: var(--magenta-2); box-shadow: none; transform: translateY(-2px); } .btn--sm { padding: 11px 18px; font-size: .74rem; } .textlink { font-family: var(--font-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color: var(--bone); display:inline-flex; align-items:center; gap:9px; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease); } .textlink:hover { color: var(--magenta-2); border-color: var(--magenta); gap: 14px; } /* ---------- Header / Nav ---------- */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s; border-bottom: 1px solid transparent; } .hdr.scrolled { background: rgba(10,10,11,0.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); } .hdr__row { display: flex; align-items: center; justify-content: space-between; height: 74px; } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 40px; height: 40px; } .brand__mark svg { width: 100%; height: 100%; } .brand__type { font-family: var(--font-mark); font-weight: 400; font-size: 1.55rem; letter-spacing: .14em; color: var(--bone); line-height: 1; padding-right:.14em; } .nav { display: flex; align-items: center; gap: 34px; } .nav a { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bone-dim); position: relative; padding: 6px 0; transition: color .25s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--magenta); transition: width .3s var(--ease); } .nav a:hover{ color: var(--bone); } .nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; } .nav a[aria-current="page"]{ color: var(--bone); } .hdr__cta { display:flex; align-items:center; gap: 18px; } .burger { display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; background:transparent; cursor:pointer; align-items:center; justify-content:center; } .burger span{ display:block; width:18px; height:1.5px; background:var(--bone); position:relative; transition: .3s var(--ease); } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--bone); transition:.3s var(--ease); } .burger span::before{ top:-6px; } .burger span::after{ top:6px; } body.menu-open .burger span{ background:transparent; } body.menu-open .burger span::before{ top:0; transform:rotate(45deg); } body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); } /* mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--ink); transform: translateY(-100%); transition: transform .5s var(--ease); display: flex; flex-direction: column; justify-content: center; padding: var(--pad-x); pointer-events: none; } body.menu-open .mobile-menu { transform: translateY(0); pointer-events: auto; } .mobile-menu a { font-family: var(--font-display); font-weight:700; font-size: clamp(2rem, 9vw, 3.6rem); color: var(--bone); padding: 10px 0; letter-spacing:-.02em; border-bottom:1px solid var(--line); } .mobile-menu a:last-of-type{ border-bottom:0; } .mobile-menu a:hover{ color: var(--magenta-2); } .mobile-menu .mm-foot{ margin-top: 40px; font-family:var(--font-mono); font-size:.8rem; color:var(--mute); letter-spacing:.05em; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(140px, 22vh, 240px); padding-bottom: var(--sect-y); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,4vw,64px); align-items: center; } .hero__title { margin: 18px 0 26px; } .hero__title .ln { display:block; overflow:hidden; } .hero__title .ln > span { display:block; transform: translateY(110%); animation: rise .9s var(--ease) forwards; } .hero__title .ln:nth-child(2) > span{ animation-delay:.08s; } .hero__title .ln:nth-child(3) > span{ animation-delay:.16s; } @keyframes rise { to { transform: translateY(0); } } .hero__sub { max-width: 46ch; } .hero__cta { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; } .hero__art { position: relative; aspect-ratio: 1/1; } .hero__art .tangle { position:absolute; inset:-8%; } .hero__pointerglow{ position:absolute; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(230,0,126,.28), transparent 62%); filter: blur(14px); pointer-events:none; opacity:0; transition: opacity .5s; mix-blend-mode: screen; } .hero__art:hover .hero__pointerglow{ opacity:1; } /* tangle animation */ .tangle svg { width:100%; height:100%; overflow: visible; } .tangle .knot { transform-origin: 50% 50%; animation: breathe 16s ease-in-out infinite; } @keyframes breathe { 0%,100%{ transform: rotate(-3deg) scale(1); } 50%{ transform: rotate(4deg) scale(1.045); } } .tangle .knot path { animation: shimmer 6s ease-in-out infinite; } @keyframes shimmer { 0%,100%{ opacity:var(--o,.8);} 50%{ opacity: calc(var(--o,.8) * 1.25);} } @media (prefers-reduced-motion: reduce){ .tangle .knot, .tangle .knot path { animation: none !important; } .hero__title .ln > span { animation: none; transform:none; } } /* ---------- Logo strip ---------- */ .strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: 30px; } .strip__label{ text-align:center; margin-bottom:22px; } .strip__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(22px,4vw,58px); } .client-word{ font-family: var(--font-display); font-weight:700; font-size: clamp(1rem,1.7vw,1.35rem); letter-spacing:.01em; color: var(--mute); transition: color .3s var(--ease); white-space:nowrap; } .client-word:hover{ color: var(--bone); } /* ---------- Generic grids ---------- */ .grid { display:grid; gap: clamp(16px,2vw,26px); } .g-2{ grid-template-columns: repeat(2,1fr); } .g-3{ grid-template-columns: repeat(3,1fr); } .g-4{ grid-template-columns: repeat(4,1fr); } .split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items:center; } .split--wide { grid-template-columns: .8fr 1.2fr; } .section-head{ max-width: 62ch; margin-bottom: clamp(40px,6vh,72px); } .section-head.center{ margin-inline:auto; text-align:center; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,3vw,38px); position: relative; overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } .card:hover{ border-color: var(--line-2); transform: translateY(-3px); } .card__num{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; color: var(--magenta); } .card h3{ margin: 16px 0 10px; } .card p{ color: var(--bone-dim); margin:0; font-size: .98rem; } .card__icon{ width:40px; height:40px; color: var(--magenta); margin-bottom: 20px; } .card__icon svg{ width:100%; height:100%; } /* capability card with hover magenta wash */ .capa::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 100% 0%, var(--magenta-ghost), transparent 55%); opacity:0; transition:opacity .35s; pointer-events:none; } .capa:hover::after{ opacity:1; } /* ---------- Stats ---------- */ .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,3vw,40px); } .stat__n{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.4rem,4.6vw,3.8rem); letter-spacing:-.03em; line-height:1; } .stat__n .u{ color: var(--magenta); } .stat__l{ font-family: var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--mute); margin-top: 12px; } /* ---------- Process (numbered — real sequence) ---------- */ .steps{ display:grid; gap: 0; } .step{ display:grid; grid-template-columns: 90px 1fr; gap: clamp(20px,4vw,60px); padding: clamp(28px,4vh,46px) 0; border-top:1px solid var(--line); align-items:start; } .step:last-child{ border-bottom:1px solid var(--line); } .step__n{ font-family: var(--font-mono); font-size:.85rem; color: var(--magenta); letter-spacing:.1em; padding-top:6px; } .step h3{ margin-bottom: 12px; } .step p{ color: var(--bone-dim); max-width: 60ch; margin:0; } /* ---------- chaos -> order signature ---------- */ .c2o{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: clamp(18px,4vw,50px); } .c2o__box{ aspect-ratio: 1/1; border:1px solid var(--line); border-radius: var(--radius); position:relative; overflow:hidden; background: var(--ink-2); } .c2o__box .tangle{ position:absolute; inset:6%; } .c2o__arrow{ font-family:var(--font-mono); color: var(--magenta); font-size:1.4rem; } .ordergrid{ position:absolute; inset:14%; display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; gap: 8px; } .ordergrid i{ display:block; border:1px solid var(--line-2); border-radius:2px; background: var(--surface); opacity:0; transform: scale(.6); transition: opacity .5s var(--ease), transform .5s var(--ease); } .c2o.in .ordergrid i{ opacity:1; transform: scale(1); } .ordergrid i.on{ background: var(--magenta); border-color: var(--magenta); box-shadow: var(--glow); } /* ---------- CTA band ---------- */ .cta-band{ position:relative; overflow:hidden; } .cta-band .tangle{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); width: min(46vw,540px); aspect-ratio:1; opacity:.5; pointer-events:none; } .cta-band__in{ position:relative; z-index:1; max-width: 30ch; } /* ---------- Case study ---------- */ .case-hero{ padding-top: clamp(130px,20vh,210px); } .case-meta{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: 26px; margin-top: 40px; } .case-meta dt{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--mute); margin-bottom:8px; } .case-meta dd{ margin:0; font-weight:600; font-size:1.02rem; } .case-band{ aspect-ratio: 16/7; border-radius: var(--radius); border:1px solid var(--line); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; } .case-band .tangle{ position:absolute; width:44%; aspect-ratio:1; left:8%; top:50%; transform:translateY(-50%); opacity:.85; } .case-band__word{ font-family:var(--font-display); font-weight:800; font-size: clamp(2rem,6vw,5rem); letter-spacing:-.03em; color: var(--bone); position:relative; z-index:1; } .pull{ font-family: var(--font-display); font-weight:700; font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.15; letter-spacing:-.02em; border-left:2px solid var(--magenta); padding-left: clamp(20px,3vw,40px); margin: 10px 0; } /* case card (work index) */ .case-card{ display:block; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--surface); transition: border-color .3s var(--ease), transform .3s var(--ease); } .case-card:hover{ border-color: var(--line-2); transform: translateY(-4px); } .case-card__vis{ aspect-ratio: 16/10; position:relative; overflow:hidden; background: var(--ink-2); display:flex; align-items:center; justify-content:center; } .case-card__vis .tangle{ position:absolute; width:52%; aspect-ratio:1; opacity:.7; transition: transform .5s var(--ease); } .case-card:hover .case-card__vis .tangle{ transform: scale(1.08) rotate(6deg); } .case-card__vis .cw{ position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size: clamp(1.4rem,2.6vw,2.2rem); color:var(--bone); letter-spacing:-.02em; } .case-card__body{ padding: 22px 24px 26px; } .case-card__tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--magenta); } .case-card__body h3{ margin:10px 0 8px; font-size:1.25rem; } .case-card__body p{ color: var(--mute); margin:0; font-size:.92rem; } /* ---------- Form ---------- */ .form{ display:grid; gap: 22px; } .field{ display:flex; flex-direction:column; gap:9px; } .field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--bone-dim); } .field .req{ color: var(--magenta); } .field input, .field select, .field textarea{ width:100%; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); color: var(--bone); font-family: var(--font-body); font-size: 1rem; padding: 14px 16px; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .field textarea{ min-height: 140px; resize: vertical; } .field input::placeholder,.field textarea::placeholder{ color: var(--mute); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color: var(--magenta); background: var(--surface-2); box-shadow: 0 0 0 3px var(--magenta-ghost); } .field.invalid input,.field.invalid select,.field.invalid textarea{ border-color: #ff5a7a; } .field .err{ display:none; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:#ff6a86; } .field.invalid .err{ display:block; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .form__note{ font-size:.85rem; color: var(--mute); } .form__status{ min-height: 1.2em; font-family: var(--font-mono); font-size:.8rem; letter-spacing:.03em; } .form__status.ok{ color: var(--magenta-2); } .form__status.bad{ color:#ff6a86; } .form-success{ display:none; border:1px solid var(--magenta); background: var(--magenta-ghost); border-radius: var(--radius); padding: 34px; text-align:center; } .form-success.show{ display:block; animation: rise .5s var(--ease); } .form-success .tick{ width:56px; height:56px; margin: 0 auto 18px; color: var(--magenta-2); } .btn.loading{ pointer-events:none; opacity:.75; } .btn .spin{ display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: sp .7s linear infinite; } .btn.loading .spin{ display:inline-block; } .btn.loading .btn-label{ opacity:.7; } @keyframes sp{ to{ transform: rotate(360deg);} } /* contact info list */ .info-list{ display:grid; gap: 26px; } .info-list .lbl{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--mute); margin-bottom:6px; } .info-list .val{ font-size:1.05rem; } .info-list a.val:hover{ color: var(--magenta-2); } /* faq */ .faq{ border-top:1px solid var(--line); } .faq details{ border-bottom:1px solid var(--line); } .faq summary{ list-style:none; cursor:pointer; padding: 24px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; font-family: var(--font-display); font-weight:700; font-size: clamp(1.05rem,1.7vw,1.35rem); letter-spacing:-.01em; } .faq summary::-webkit-details-marker{ display:none; } .faq summary .pm{ color: var(--magenta); font-family: var(--font-mono); transition: transform .3s var(--ease); flex:0 0 auto; } .faq details[open] summary .pm{ transform: rotate(45deg); } .faq .ans{ color: var(--bone-dim); padding: 0 0 26px; max-width: 72ch; } /* team / values */ .value{ padding: 30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns: .4fr 1fr; gap: clamp(16px,3vw,50px); } .value h3{ font-size: clamp(1.15rem,1.9vw,1.5rem); } .value p{ margin:0; color: var(--bone-dim); } /* ---------- Footer ---------- */ .ftr{ border-top:1px solid var(--line); padding-block: clamp(56px,7vh,90px) 40px; background: var(--ink-2); } .ftr__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(30px,4vw,50px); } .ftr__brand .brand{ margin-bottom: 18px; } .ftr__brand p{ color: var(--mute); max-width: 34ch; font-size:.95rem; } .ftr h4{ font-family: var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--mute); margin-bottom: 18px; } .ftr__col a{ display:block; color: var(--bone-dim); padding: 7px 0; font-size:.96rem; transition: color .2s var(--ease); } .ftr__col a:hover{ color: var(--magenta-2); } .ftr__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top: clamp(40px,6vh,70px); padding-top: 26px; border-top:1px solid var(--line); } .ftr__bottom span{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; color: var(--mute); } /* ---------- reveal ---------- */ .reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;} .reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;} @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none;} } /* ---------- page hero (inner pages) ---------- */ .page-hero{ padding-top: clamp(140px,20vh,220px); padding-bottom: clamp(40px,6vh,70px); position:relative; overflow:hidden; } .page-hero .tangle{ position:absolute; right:-4%; top:20%; width:min(34vw,420px); aspect-ratio:1; opacity:.35; pointer-events:none; } .page-hero__in{ position:relative; z-index:1; max-width: 22ch; } .page-hero .lead{ max-width: 52ch; margin-top: 22px; } /* util */ .mt-s{ margin-top: 18px;} .mt-m{ margin-top: 34px;} .mt-l{ margin-top: 60px; } .center{ text-align:center; } .maxw{ max-width: 60ch; } .nowrap{ white-space:nowrap; } /* ---------- responsive ---------- */ @media (max-width: 960px){ body{ font-size:16px; } .nav{ display:none; } .hdr__cta .btn{ display:none; } .burger{ display:flex; } .hero__grid{ grid-template-columns: 1fr; } .hero__art{ max-width: 420px; margin-top: 10px; order:-1; } .split, .split--wide{ grid-template-columns: 1fr; } .g-3,.g-4{ grid-template-columns: repeat(2,1fr); } .stats{ grid-template-columns: repeat(2,1fr); row-gap: 34px; } .case-meta{ grid-template-columns: repeat(2,1fr); row-gap: 22px; } .ftr__top{ grid-template-columns: 1fr 1fr; row-gap: 36px; } .c2o{ grid-template-columns: 1fr; gap: 24px; } .c2o__arrow{ transform: rotate(90deg); justify-self:center; } .value{ grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 560px){ .g-2,.g-3,.g-4{ grid-template-columns: 1fr; } .stats{ grid-template-columns: 1fr 1fr; } .form__row{ grid-template-columns: 1fr; } .ftr__top{ grid-template-columns: 1fr; } .step{ grid-template-columns: 1fr; gap: 8px; } .case-meta{ grid-template-columns: 1fr 1fr; } } /* ============================================================ BLOG + CMS ============================================================ */ .post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,30px); } .tagbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: clamp(30px,5vh,52px); } .tagbtn{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); border:1px solid var(--line); background:transparent; border-radius:100px; padding:9px 16px; cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .tagbtn:hover{ color:var(--bone); border-color:var(--line-2); } .tagbtn.active{ color:#fff; background:var(--magenta); border-color:var(--magenta); } .post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:border-color .3s var(--ease), transform .3s var(--ease); cursor:pointer; } .post-card:hover{ border-color:var(--line-2); transform:translateY(-4px); } .post-card__vis{ aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--ink-2); display:flex; align-items:center; justify-content:center; } .post-card__vis .tangle{ position:absolute; width:58%; aspect-ratio:1; opacity:.55; transition:transform .5s var(--ease); } .post-card:hover .post-card__vis .tangle{ transform:scale(1.1) rotate(8deg); } .post-card__vis .idx{ position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--bone); opacity:.15; } .post-card__body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; } .post-card__meta{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta); } .post-card h3{ font-size:1.24rem; letter-spacing:-.01em; } .post-card p{ color:var(--mute); margin:0; font-size:.93rem; flex:1; } .post-card__foot{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--mute); margin-top:6px; } .draft-badge{ display:inline-block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#ffd166; border:1px solid rgba(255,209,102,.4); border-radius:100px; padding:2px 8px; margin-left:8px; } .blog-featured{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,54px); align-items:center; margin-bottom:clamp(40px,6vh,72px); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); cursor:pointer; transition:border-color .3s var(--ease); } .blog-featured:hover{ border-color:var(--line-2); } .blog-featured__vis{ aspect-ratio:4/3; position:relative; background:var(--ink-2); display:flex; align-items:center; justify-content:center; overflow:hidden; } .blog-featured__vis .tangle{ position:absolute; width:60%; aspect-ratio:1; opacity:.6; } .blog-featured__body{ padding:clamp(24px,4vw,48px); } .blog-featured__body .post-card__meta{ margin-bottom:14px; } .blog-featured__body h2{ margin-bottom:16px; } /* article / prose */ .post-hero{ padding-top:clamp(130px,20vh,210px); } .post-back{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); display:inline-flex; gap:8px; align-items:center; margin-bottom:30px; transition:color .2s,gap .25s var(--ease); } .post-back:hover{ color:var(--magenta-2); gap:12px; } .post-titlemeta{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); margin-bottom:20px; display:flex; flex-wrap:wrap; gap:16px; } .post-titlemeta span{ color:var(--mute); } .post-band{ aspect-ratio:16/6; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; background:var(--ink-2); display:flex; align-items:center; justify-content:center; margin:40px 0; } .post-band .tangle{ position:absolute; width:30%; aspect-ratio:1; opacity:.7; } .prose{ max-width:70ch; margin:0 auto; } .prose > *{ margin:0 0 1.15em; } .prose h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; margin:1.7em 0 .6em; } .prose h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.01em; margin:1.5em 0 .5em; } .prose p{ color:var(--bone-dim); font-size:1.075rem; line-height:1.75; } .prose a{ color:var(--magenta-2); border-bottom:1px solid var(--magenta); } .prose a:hover{ color:var(--bone); } .prose strong{ color:var(--bone); } .prose ul,.prose ol{ color:var(--bone-dim); padding-left:1.3em; line-height:1.8; } .prose li{ margin-bottom:.4em; } .prose blockquote{ border-left:2px solid var(--magenta); padding:2px 0 2px 26px; margin:1.4em 0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.25; letter-spacing:-.01em; color:var(--bone); } .prose code{ font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:2px 6px; color:var(--magenta-2); } .prose pre{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; overflow:auto; } .prose pre code{ background:none; border:0; padding:0; color:var(--bone-dim); } .prose hr{ border:0; border-top:1px solid var(--line); margin:2em 0; } .post-foot{ max-width:70ch; margin:60px auto 0; padding-top:30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; } .blog-empty{ text-align:center; padding:70px 0; color:var(--mute); font-family:var(--font-mono); letter-spacing:.04em; } /* ---------- ADMIN / CMS ---------- */ .admin-body{ padding-top:0; } .admin-top{ position:sticky; top:0; z-index:50; background:rgba(10,10,11,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .admin-top__row{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px; } .admin-top .brand__type{ font-size:1.3rem; } .admin-tag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); border:1px solid var(--magenta); border-radius:100px; padding:3px 10px; } .admin-actions{ display:flex; gap:10px; flex-wrap:wrap; } .admin-shell{ display:grid; grid-template-columns:320px 1fr; gap:0; min-height:calc(100vh - 66px); } .admin-list{ border-right:1px solid var(--line); padding:22px; overflow:auto; } .admin-list__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .admin-list__head h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); } .post-row{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; cursor:pointer; background:var(--surface); transition:border-color .2s,background .2s; } .post-row:hover{ border-color:var(--line-2); } .post-row.active{ border-color:var(--magenta); background:var(--surface-2); } .post-row h5{ font-family:var(--font-body); font-weight:600; font-size:.98rem; margin:0 0 4px; letter-spacing:-.01em; } .post-row .rmeta{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--mute); } .admin-editor{ padding:clamp(20px,3vw,40px); overflow:auto; } .admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .admin-editor .field label{ color:var(--bone-dim); } .editor-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } .editor-split textarea{ min-height:420px; font-family:var(--font-mono); font-size:.9rem; line-height:1.6; } .preview-pane{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--ink-2); min-height:420px; overflow:auto; } .preview-pane .prose{ max-width:none; } .admin-editor__bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); } .btn--danger{ background:transparent; border-color:rgba(255,90,122,.5); color:#ff6a86; } .btn--danger:hover{ background:transparent; border-color:#ff5a7a; color:#ff8aa0; box-shadow:none; } .btn--muted{ background:var(--surface-2); color:var(--bone); } .btn--muted:hover{ background:var(--surface-2); border-color:var(--line-2); box-shadow:none; color:var(--bone); } .admin-hint{ font-family:var(--font-mono); font-size:.72rem; color:var(--mute); letter-spacing:.03em; line-height:1.6; } .admin-empty{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--mute); font-family:var(--font-mono); text-align:center; padding:40px; } .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-2); border:1px solid var(--magenta); color:var(--bone); padding:13px 22px; border-radius:100px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; z-index:200; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width: 900px){ .post-grid{ grid-template-columns:1fr 1fr; } .blog-featured{ grid-template-columns:1fr; } .blog-featured__vis{ aspect-ratio:16/9; } .admin-shell{ grid-template-columns:1fr; } .admin-list{ border-right:0; border-bottom:1px solid var(--line); max-height:340px; } .editor-split{ grid-template-columns:1fr; } .preview-pane{ min-height:auto; } } @media (max-width:560px){ .post-grid{ grid-template-columns:1fr; } .admin-grid{ grid-template-columns:1fr; } }