/* ================================================================= YoRHa Design System — shared stylesheet (multi-page) Light (default) + dark themes via [data-theme="dark"] on . ================================================================= */ :root{ --bg:#bab5a0; --panel:#c5c0a9; --panel-2:#cfcab4; --ink:#454138; --ink-soft:#6a6457; --invert:#bab5a0; --scan:rgba(69,65,56,.05); --grain:.09; --img-filter:none; --hair:2px; --speed:.22s; --ease:cubic-bezier(.2,.7,.3,1); --maxw:1120px; } [data-theme="dark"]{ --bg:#211f1b; --panel:#2b2925; --panel-2:#332f29; --ink:#cdc7b2; --ink-soft:#8f8975; --invert:#211f1b; --scan:rgba(0,0,0,.18); --grain:.06; --img-filter:none; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scrollbar-gutter:stable; overflow-y:scroll; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Jost',ui-sans-serif,system-ui,sans-serif; letter-spacing:.04em; line-height:1.55; overflow-x:hidden; transition:background .3s var(--ease), color .3s var(--ease); } a{ color:inherit; } img{ max-width:100%; display:block; } /* atmosphere */ body::before{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; background:repeating-linear-gradient(to bottom,var(--scan) 0,var(--scan) 1px,transparent 1px,transparent 4px); mix-blend-mode:multiply; } body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } .frame{ position:fixed; inset:9px; border:var(--hair) solid var(--ink); opacity:.5; pointer-events:none; z-index:10011; } .brackets{ position:relative; } .brackets::before,.brackets::after{ content:""; position:absolute; width:13px; height:13px; } .brackets::before{ left:-1px; top:-1px; border-left:var(--hair) solid var(--ink); border-top:var(--hair) solid var(--ink); } .brackets::after{ right:-1px; bottom:-1px; border-right:var(--hair) solid var(--ink); border-bottom:var(--hair) solid var(--ink); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; } /* ===== NAV ===== */ .topnav{ position:sticky; top:0; z-index:10010; background:var(--bg); border-bottom:var(--hair) solid var(--ink); transition:background .3s var(--ease); } .topnav .inner{ max-width:var(--maxw); margin:0 auto; padding:11px 26px; display:flex; align-items:center; gap:18px; } .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; position:relative; top:6px; } .brand .mark{ width:20px; height:20px; border:var(--hair) solid var(--ink); display:grid; place-items:center; flex:none; } .brand .mark i{ width:6px; height:6px; background:var(--ink); transform:rotate(45deg); display:block; } .brand b{ font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:13px; } .brand span{ font-size:11px; letter-spacing:.18em; color:var(--ink-soft); text-transform:uppercase; } .navlinks{ margin-left:auto; display:flex; gap:2px; align-items:center; } .navlinks a{ position:relative; isolation:isolate; font-size:12px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:8px 13px; color:var(--ink); } .navlinks a::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform var(--speed) var(--ease); z-index:-1; } .navlinks a:hover, .navlinks a.active{ color:var(--invert); } .navlinks a:hover::before, .navlinks a.active::before{ transform:scaleY(1); } /* theme toggle */ .theme-btn{ margin-left:6px; cursor:pointer; font:inherit; line-height:0; background:var(--panel); color:var(--ink); border:var(--hair) solid var(--ink); padding:8px; display:inline-flex; align-items:center; justify-content:center; } .theme-btn .sun,.theme-btn .moon{ font-size:14px; line-height:1; } [data-theme="dark"] .theme-btn .moon{ display:none; } :root .theme-btn .sun{ display:none; } [data-theme="dark"] .theme-btn .sun{ display:inline-block; } @media(max-width:780px){ .navlinks a{ display:none; } .navlinks a.keep{ display:inline-block; } .brand span{ display:none; } } /* ===== SHARED ===== */ section{ scroll-margin-top:64px; } .sec-head{ display:flex; align-items:center; gap:14px; margin:64px 0 26px; } .sec-head .id{ font-size:12px; letter-spacing:.24em; color:var(--ink-soft); } .sec-head h2{ margin:0; font-size:14px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; } .sec-head .bar{ flex:1; height:var(--hair); background:var(--ink); opacity:.55; } .sec-head .diamond{ width:8px; height:8px; background:var(--ink); transform:rotate(45deg); flex:none; } .btn{ position:relative; isolation:isolate; cursor:pointer; font:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; background:var(--panel); color:var(--ink); border:var(--hair) solid var(--ink); padding:11px 20px; display:inline-flex; align-items:center; gap:9px; overflow:hidden; } .btn::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--ink); transition:width var(--speed) var(--ease); z-index:-1; } .btn:hover{ color:var(--invert); } .btn:hover::before{ width:100%; } .btn:active{ transform:translateY(1px); } .btn.solid{ background:var(--ink); color:var(--invert); } .btn.solid::before{ background:var(--panel); } .btn.solid:hover{ color:var(--ink); } /* ===== HERO (index) ===== */ .hero{ padding:72px 0 8px; } .hero-head{ margin:0 0 34px; padding-bottom:28px; border-bottom:var(--hair) solid color-mix(in srgb,var(--ink) 32%,transparent); } .hero-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; } .hero-body{ display:grid; grid-template-columns:1.5fr .85fr; gap:48px; align-items:stretch; } .hero-copy{ display:flex; flex-direction:column; } @media(max-width:820px){ .hero-body{ grid-template-columns:1fr; gap:26px; } .hero{ padding-top:48px; } } .hero .greet{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; } .hero h1{ margin:0; font-size:clamp(40px,7vw,78px); font-weight:600; line-height:.98; letter-spacing:-.01em; } .hero .role{ display:inline-block; margin:0 0 14px; background:var(--ink); color:var(--invert); padding:6px 14px; font-size:14px; letter-spacing:.26em; text-transform:uppercase; } .hero p.bio{ margin:0 0 16px; font-size:15px; max-width:54ch; } .hero p.bio b{ font-weight:600; } .hero .cta{ margin-top:auto; padding-top:10px; display:flex; gap:12px; flex-wrap:wrap; } .readout{ border:var(--hair) solid var(--ink); background:var(--panel); display:flex; flex-direction:column; } .readout .rtitle{ background:var(--ink); color:var(--invert); font-size:11px; letter-spacing:.24em; text-transform:uppercase; padding:8px 14px; } .readout dl{ margin:0; padding:6px 14px 12px; } .readout .r{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed; border-color:color-mix(in srgb,var(--ink) 30%,transparent); font-size:13px; } .readout .r:last-child{ border-bottom:none; } .readout .r dt{ color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; font-size:11px; } .readout .r dd{ margin:0; text-align:right; } .socials{ display:flex; gap:8px; padding:14px; margin-top:auto; flex-wrap:wrap; } .socials a{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:var(--hair) solid var(--ink); padding:7px 11px; text-decoration:none; position:relative; isolation:isolate; overflow:hidden; } .socials a::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--speed) var(--ease); z-index:-1; } .socials a:hover{ color:var(--invert); } .socials a:hover::before{ transform:scaleX(1); } /* ===== WORK GRID ===== */ .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; } .card{ position:relative; isolation:isolate; z-index:10000; background:var(--panel); border:var(--hair) solid var(--ink); overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:transform var(--speed) var(--ease); } .card:hover{ transform:translateY(-3px); } .card .cover{ aspect-ratio:16/9; overflow:hidden; border-bottom:var(--hair) solid var(--ink); position:relative; background:var(--ink); } .card .cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .card:hover .cover img{ transform:scale(1.04); } .card .idx{ position:absolute; top:0; left:0; background:var(--ink); color:var(--invert); font-size:11px; letter-spacing:.18em; padding:4px 9px; z-index:2; } .card .tag{ position:absolute; top:0; right:0; background:var(--bg); border-left:var(--hair) solid var(--ink); border-bottom:var(--hair) solid var(--ink); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:4px 9px; z-index:2; } .card .body{ padding:14px 15px 16px; flex:1; display:flex; flex-direction:column; min-height:175px; box-sizing:border-box; } .card h3{ margin:0; font-size:16px; font-weight:600; } .card .meta{ margin-top:7px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .card .plats{ margin-top:auto; padding-top:10px; display:flex; gap:6px; flex-wrap:wrap; } .card .plats span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--ink); padding:3px 6px; color:var(--ink-soft); } .card .open{ margin-top:13px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:7px; } .card .open .ar{ transition:transform var(--speed) var(--ease); } .card:hover .open .ar{ transform:translateX(4px); } /* ===== PANELS ===== */ .panels{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media(max-width:760px){ .panels{ grid-template-columns:1fr; } } .panel{ background:var(--panel); border:var(--hair) solid var(--ink); padding:20px 22px; } .panel h3{ margin:0 0 16px; font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding-bottom:10px; border-bottom:var(--hair) solid var(--ink); } .kv{ margin:0 0 14px; } .kv:last-child{ margin-bottom:0; } .kv dt{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; } .kv dd{ margin:3px 0 0; font-size:13px; color:var(--ink-soft); } /* ===== TIMELINE ===== */ .timeline{ display:flex; flex-direction:column; gap:10px; } .tl{ display:grid; grid-template-columns:160px 1fr; gap:18px; border:var(--hair) solid var(--ink); background:var(--panel); padding:14px 16px; position:relative; isolation:isolate; overflow:hidden; } .tl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--ink); transition:width var(--speed) var(--ease); z-index:-1; } .tl:hover{ color:var(--invert); } .tl:hover::before{ width:100%; } .tl:hover .tl-when,.tl:hover .tl-org{ color:var(--invert); } .tl-when{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .tl-role{ font-size:15px; font-weight:600; } .tl-org{ font-size:12px; letter-spacing:.08em; color:var(--ink-soft); margin-top:2px; } @media(max-width:560px){ .tl{ grid-template-columns:1fr; gap:4px; } } /* ===== CONTACT / FOOTER ===== */ .contact{ border:var(--hair) solid var(--ink); background:var(--ink); color:var(--invert); padding:34px; display:grid; grid-template-columns:1.2fr 1fr; gap:26px; margin-top:18px; align-items:center; } @media(max-width:680px){ .contact{ grid-template-columns:1fr; } } .contact h2{ margin:0 0 8px; font-size:26px; font-weight:600; } .contact p{ margin:0; font-size:14px; opacity:.85; max-width:40ch; } .contact .lines{ display:flex; flex-direction:column; gap:10px; } .contact .lines a,.contact .lines span{ display:flex; gap:12px; font-size:14px; text-decoration:none; align-items:baseline; } .contact .lines .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.6; min-width:74px; } .contact .lines a .v{ border-bottom:1px solid var(--invert); } .foot{ text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); padding:26px 0 40px; } /* ===== PROJECT PAGE ===== */ .phero{ position:relative; z-index:10000; border:var(--hair) solid var(--ink); margin-top:26px; overflow:hidden; background:var(--ink); } .phero .pcover{ position:absolute; inset:0; z-index:0; } .phero .pcover img{ width:100%; height:100%; object-fit:cover; opacity:1; } .phero .pmask{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, var(--bg) 4%, color-mix(in srgb,var(--bg) 55%,transparent) 55%, color-mix(in srgb,var(--bg) 20%,transparent)); } .phero .pinner{ position:relative; z-index:2; padding:120px 28px 26px; } .phero .pkicker{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); } .phero h1{ margin:6px 0 0; font-size:clamp(30px,5.5vw,56px); font-weight:600; line-height:1; } .phero h1 a{ text-decoration:none; } .phero .pmeta{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .phero .pmeta .role{ background:var(--ink); color:var(--invert); padding:5px 12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; } .phero .pmeta .plat{ border:var(--hair) solid var(--ink); padding:5px 10px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .pbody{ display:grid; grid-template-columns:1fr 300px; gap:30px; margin:34px 0 20px; align-items:start; } @media(max-width:820px){ .pbody{ grid-template-columns:1fr; } } .pbody .lead p{ font-size:15.5px; margin:0 0 16px; } .pbody .lead p:first-child{ font-size:17px; } .embed{ position:relative; z-index:10000; aspect-ratio:16/9; border:var(--hair) solid var(--ink); margin:8px 0 22px; background:var(--ink); } .embed iframe,.embed img{ width:100%; height:100%; border:0; object-fit:cover; } .aside{ border:var(--hair) solid var(--ink); background:var(--panel); position:sticky; top:74px; } .aside .at{ background:var(--ink); color:var(--invert); font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:9px 14px; } .aside .asec{ padding:12px 14px; border-bottom:var(--hair) solid var(--ink); } .aside .asec:last-child{ border-bottom:none; } .aside .asec h4{ margin:0 0 8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); } .aside ul{ list-style:none; margin:0; padding:0; } .aside li{ font-size:13px; padding:4px 0 4px 16px; position:relative; } .aside li::before{ content:"▸"; position:absolute; left:0; color:var(--ink); } .aside .links{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; } .dsub{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin:30px 0 14px; padding-bottom:8px; border-bottom:var(--hair) solid var(--ink); } /* gallery */ .gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; } .gallery button{ position:relative; z-index:10000; padding:0; border:var(--hair) solid var(--ink); background:var(--ink); cursor:pointer; overflow:hidden; aspect-ratio:16/9; } .gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); } .gallery button:hover img{ transform:scale(1.05); } .pnav{ display:flex; justify-content:space-between; gap:12px; margin:40px 0 10px; } .pnav a{ max-width:48%; } /* lightbox */ .lb{ position:fixed; inset:0; z-index:10020; display:none; background:rgba(0,0,0,.82); } .lb.open{ display:grid; place-items:center; } .lb img{ max-width:92vw; max-height:86vh; border:var(--hair) solid #fff; } .lb .x{ position:absolute; top:18px; right:20px; cursor:pointer; background:none; border:2px solid #fff; color:#fff; width:34px; height:34px; font-size:16px; } .lb .nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:2px solid #fff; color:#fff; width:40px; height:54px; font-size:20px; cursor:pointer; } .lb .prev{ left:20px; } .lb .next{ right:20px; } /* reveal */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* 404 */ .fourohfour{ min-height:70vh; display:grid; place-items:center; text-align:center; } .fourohfour h1{ font-size:clamp(60px,16vw,150px); margin:0; font-weight:600; line-height:.9; } .fourohfour p{ letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:10px 0 26px; }