/*! Theme Name: iPrint Advertising Theme URI: https://iprintadvertising.com/ Author: Built for iPrint Advertising Description: Bold CMYK screenprint theme for iPrint Advertising, Bayonne NJ. Single-scroll landing page with an instant price estimator and a matching blog. No page builder, no dependencies. Version: 1.0.1 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: iprint Tags: business, portfolio, blog, one-column, custom-logo, custom-menu, featured-images, threaded-comments, block-styles */ /* ═══════════════════════════════════════════════════════════════ iPrint Advertising — "Press Room" CMYK screenprint brutalism. Ink-black paper, three inks, hard grid. ═══════════════════════════════════════════════════════════════ */ /* ── tokens ────────────────────────────────────────────────── */ :root{ --ink: #08080a; --ink-2: #0e0e13; --ink-3: #15151c; --paper: #f2eee4; --paper-2: #e4ded0; --c: #00aeef; /* cyan */ --m: #ec008c; /* magenta */ --y: #ffe500; /* yellow */ --fg: #f5f4f1; --fg-dim: #9c9ba4; --line: rgba(255,255,255,.13); --line-2: rgba(255,255,255,.07); --display: 'Big Shoulders Display','Big Shoulders','Oswald','Arial Narrow', 'Helvetica Neue Condensed',sans-serif; --body: 'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --mono: 'Martian Mono',ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace; --gut: clamp(1.1rem, 4vw, 3rem); --max: 1280px; --rule: 1px solid var(--line); --ease: cubic-bezier(.2,.7,.25,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* ── reset ─────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem; overflow-x:clip; /* clip, not hidden — keeps position:sticky working */ } body{ margin:0; background:var(--ink); color:var(--fg); font:400 clamp(1rem,.96rem + .2vw,1.075rem)/1.62 var(--body); /* NB: overflow-x:hidden here would make a scroll container and break the sticky header — the clip on does the job instead */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%;display:block} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:900;line-height:.88;letter-spacing:-.012em} p{margin:0} ul,ol,dl,dd{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{ position:fixed;top:.6rem;left:.6rem;z-index:200; background:var(--y);color:#000;padding:.7rem 1.1rem; font:700 .85rem/1 var(--mono);border-radius:2px; transform:translateY(-200%);transition:transform .2s var(--ease); } .skip:focus{transform:none} :focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:2px} /* ── film grain ────────────────────────────────────────────── */ .grain{ position:fixed;inset:-50%;z-index:120;pointer-events:none; opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} } /* ── layout ────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .wrap--narrow{max-width:860px} .sec{padding-block:clamp(4.5rem,10vw,8.5rem);position:relative} .sec--band{background:var(--ink-2);border-block:var(--rule)} /* inverted "paper" sections */ .sec--paper{ background:var(--paper);color:#111114; border-block:3px solid #000; } .sec--paper .sech__t em{color:#d1007e} .sec--paper .kicker{color:#57565e} .sec--paper .sech__p{color:#4a4952} /* ── shared type ───────────────────────────────────────────── */ .kicker{ font:600 .72rem/1.6 var(--mono);letter-spacing:.22em;text-transform:uppercase; color:var(--fg-dim);display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem; flex-wrap:wrap; } .kicker--sm{margin-bottom:.8rem} .kicker__n{ color:var(--y);border:1px solid currentColor;border-radius:2px; padding:.28em .5em;letter-spacing:.06em; } .sech{max-width:56ch;margin-bottom:clamp(2.5rem,5vw,4rem)} .sech--mid{margin-inline:auto;text-align:center} .sech--mid .kicker{justify-content:center} .sech__t{font-size:clamp(2.4rem,6vw,4.9rem);text-transform:uppercase} .sech__t em{font-style:normal;color:var(--y)} .sech__p{margin-top:1.2rem;color:var(--fg-dim);max-width:52ch;font-size:1.02rem} .eyebrow{ font:600 .74rem/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--fg-dim);display:flex;align-items:center;gap:.45rem;flex-wrap:wrap; } .dot{width:.52rem;height:.52rem;border-radius:50%;display:inline-block} .dot--c{background:var(--c)}.dot--m{background:var(--m)}.dot--y{background:var(--y)} .flag{ display:inline-block;background:var(--y);color:#000; font:700 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; padding:.42em .7em;margin-right:.6rem;transform:skewX(-9deg); } /* registration marks */ .regmark{ position:absolute;width:22px;height:22px;opacity:.55;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe500' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 0v9M12 15v9M0 12h9M15 12h9'/%3E%3C/svg%3E") center/contain no-repeat; } .regmark--tl{top:-11px;left:-11px} .regmark--tr{top:-11px;right:-11px} .regmark--br{bottom:-11px;right:-11px} /* misregistration ink */ .ink{position:relative;isolation:isolate} .ink::before,.ink::after{ content:attr(data-text);position:absolute;inset:0;pointer-events:none; z-index:-1;animation:register 1.1s .35s var(--ease-out) both; } .ink::before{color:var(--c);mix-blend-mode:screen} .ink::after{color:var(--m);mix-blend-mode:screen} @keyframes register{ from{transform:translate(-.11em,.05em)} to{transform:translate(-.022em,.012em)} } .ink::after{animation-name:register-b} @keyframes register-b{ from{transform:translate(.1em,-.05em)} to{transform:translate(.02em,-.012em)} } .ink:hover::before{transform:translate(-.07em,.035em);transition:transform .35s var(--ease)} .ink:hover::after{transform:translate(.065em,-.035em);transition:transform .35s var(--ease)} .sec--paper .ink::before,.sec--paper .ink::after{mix-blend-mode:multiply} /* ── buttons ───────────────────────────────────────────────── */ .btn{ --bw:2px; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font:700 .82rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; padding:1.05rem 1.6rem;border:var(--bw) solid transparent;border-radius:2px; cursor:pointer;position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s,color .2s; white-space:nowrap; } .btn span{transition:transform .25s var(--ease)} .btn:hover span{transform:translateX(4px)} .btn--y{background:var(--y);color:#0a0a0a;box-shadow:4px 4px 0 var(--m)} .btn--y:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--m)} .btn--y:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--m)} .btn--ghost{border-color:var(--line);color:var(--fg);background:transparent} .btn--ghost:hover{border-color:var(--c);color:var(--c);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,174,239,.25)} .sec--paper .btn--ghost{border-color:rgba(0,0,0,.22);color:#111} .btn--sm{padding:.72rem 1.05rem;font-size:.72rem} .btn--full{width:100%} /* ── header ────────────────────────────────────────────────── */ /* the blur lives on a pseudo-element: backdrop-filter on .hdr itself would make it the containing block for the fixed mobile nav panel */ .hdr{position:sticky;top:0;z-index:100;background:transparent} .hdr::before{ content:'';position:absolute;inset:0;z-index:-1; background:rgba(8,8,10,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); transition:background .3s,box-shadow .3s; } .hdr.is-stuck::before{background:rgba(8,8,10,.94);box-shadow:0 12px 34px rgba(0,0,0,.5)} .hdr__in{ max-width:var(--max);margin-inline:auto;padding:.85rem var(--gut); display:flex;align-items:center;gap:1.4rem; } .hdr__rule{display:flex;height:3px} .hdr__rule i{flex:1} .hdr__rule i:nth-child(1){background:var(--c)} .hdr__rule i:nth-child(2){background:var(--m)} .hdr__rule i:nth-child(3){background:var(--y)} .brand{display:flex;align-items:center;gap:.65rem;margin-right:auto} .brand__mark{width:auto;height:34px} .brand__txt{display:flex;flex-direction:column;line-height:.9} .brand__txt b{font:800 1.5rem/1 var(--display);letter-spacing:-.01em;text-transform:none} .brand__txt i{font:400 .56rem/1 var(--mono);letter-spacing:.34em;text-transform:lowercase;color:var(--fg-dim)} .nav{display:flex;gap:.2rem} .nav a{ font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; padding:.7rem .78rem;color:var(--fg-dim);position:relative;transition:color .2s; } .nav a::after{ content:'';position:absolute;left:.78rem;right:.78rem;bottom:.35rem;height:2px; background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease); } .nav a:hover,.nav a.is-active{color:var(--fg)} .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)} .hdr__cta{display:flex;align-items:center;gap:.8rem} .tel{ font:700 .84rem/1 var(--mono);letter-spacing:.04em; display:inline-flex;align-items:center;gap:.45rem;transition:color .2s; } .tel:hover{color:var(--y)} .tel__ico{color:var(--m);font-size:1rem} .burger{ display:none;width:44px;height:44px;background:none;border:1px solid var(--line); border-radius:2px;cursor:pointer;padding:0;position:relative; } .burger span{ position:absolute;left:11px;right:11px;height:2px;background:var(--fg); transition:transform .28s var(--ease),opacity .18s; } .burger span:nth-child(1){top:14px} .burger span:nth-child(2){top:21px} .burger span:nth-child(3){top:28px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── hero ──────────────────────────────────────────────────── */ .hero{position:relative;padding-block:clamp(3.5rem,8vw,7rem) clamp(4rem,8vw,7rem);overflow:hidden} .hero__dots{ position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.1px,transparent 1.2px); background-size:15px 15px; -webkit-mask-image:radial-gradient(120% 90% at 30% 20%,#000 20%,transparent 78%); mask-image:radial-gradient(120% 90% at 30% 20%,#000 20%,transparent 78%); } .hero__splat{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5} .hero__splat--c{width:44vw;height:44vw;background:var(--c);top:-14vw;right:6vw;opacity:.22} .hero__splat--m{width:34vw;height:34vw;background:var(--m);bottom:-16vw;left:-8vw;opacity:.2} .hero__splat--y{width:22vw;height:22vw;background:var(--y);top:34%;right:34%;opacity:.1} .hero__in{ position:relative;display:grid;gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center; } .hero__copy{min-width:0;container-type:inline-size} .hero__h1{ /* fallback for browsers without container queries */ font-size:clamp(3rem,8vw,7rem); /* sized off the column so the longest word can never overflow */ font-size:clamp(3rem,16.4cqw,8.4rem); text-transform:uppercase;margin:1.3rem 0 1.6rem;letter-spacing:-.022em; } .hero__h1 .line{display:block} .hero__h1 .ink{color:#fff} .hero__sub{max-width:46ch;color:#cfced6;font-size:clamp(1.02rem,1.6vw,1.16rem)} .hero__sub strong{color:var(--y);font-weight:600} .hero__btns{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem} .chips{display:flex;flex-wrap:wrap;gap:.5rem .35rem;margin-top:2.2rem} .chips li{ display:inline-flex;align-items:center;gap:.45rem; font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--fg-dim);border:1px solid var(--line-2);border-radius:999px;padding:.5rem .8rem; } .chk{width:.5rem;height:.5rem;transform:rotate(45deg);display:inline-block} .chk--c{background:var(--c)}.chk--m{background:var(--m)}.chk--y{background:var(--y)} .hero__fig{position:relative;margin:0} .hero__fig img{ width:100%;border:1px solid var(--line); box-shadow:22px 22px 0 rgba(236,0,140,.18),-14px -14px 0 rgba(0,174,239,.12); } .hero__fig figcaption{ margin-top:1rem;font:400 .68rem/1.5 var(--mono);letter-spacing:.15em; text-transform:uppercase;color:var(--fg-dim); } /* load reveal */ .reveal{opacity:0;transform:translateY(22px);animation:rise .8s var(--d,0ms) var(--ease-out) forwards} @keyframes rise{to{opacity:1;transform:none}} /* scroll reveal — only pre-hidden when JS is running */ .js .sech,.js .svc,.js .tbl,.js .why__i,.js .step,.js .gal__i,.js .extras li,.js .qa, .js .calc__form,.js .calc__out,.js .ct__side,.js .frm,.js .cta__t,.js .process__fig, .js .ftr__brand,.js .areas__copy,.js .areas__side{ opacity:0;transform:translateY(24px); } .js .in,.js li.in{ opacity:1;transform:none; transition:opacity .65s var(--ease-out) var(--d,0ms),transform .65s var(--ease-out) var(--d,0ms); } /* ── ticker ────────────────────────────────────────────────── */ .ticker{ overflow:hidden;border-block:var(--rule);background:var(--ink-2); padding-block:.95rem;display:flex; } .ticker__track{display:flex;gap:0;animation:slide 42s linear infinite;will-change:transform} .ticker__track span{ display:inline-flex;align-items:center;white-space:nowrap;padding-right:0; font:800 clamp(1.4rem,2.6vw,2.1rem)/1 var(--display);text-transform:uppercase; letter-spacing:.01em;color:#3a3a46; } .ticker:hover .ticker__track{animation-play-state:paused} .ticker .s{width:.55rem;height:.55rem;border-radius:50%;margin-inline:1.6rem;display:inline-block;flex:none} .ticker .s--c{background:var(--c)}.ticker .s--m{background:var(--m)}.ticker .s--y{background:var(--y)} @keyframes slide{to{transform:translateX(-50%)}} /* ── services ──────────────────────────────────────────────── */ .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)} .svc{ background:var(--ink);padding:clamp(1.5rem,2.6vw,2.1rem); position:relative;transition:background .3s var(--ease); display:flex;flex-direction:column; } .svc::before{ content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--k,var(--c)); transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease); } .svc:hover{background:var(--ink-3)} .svc:hover::before{transform:scaleY(1)} .svc--c{--k:var(--c)}.svc--m{--k:var(--m)}.svc--y{--k:var(--y)} .svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem} .svc__ico{width:38px;height:38px;flex:none;stroke:var(--k);fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:transform .4s var(--ease)} .svc__ico .f{fill:var(--k);stroke:none} .svc:hover .svc__ico{transform:translateY(-3px) rotate(-3deg)} .svc__price{font:700 1.7rem/1 var(--display);color:var(--k);white-space:nowrap} .svc__price small{font:400 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--fg-dim);margin-left:.15rem} .svc h3{font-size:1.72rem;text-transform:uppercase;margin-bottom:.6rem} .svc p{color:var(--fg-dim);font-size:.95rem} .svc__meta{ margin-top:auto;padding-top:1.2rem; font:400 .64rem/1.5 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase; color:#6a6975!important; } .svc--feat{grid-column:1/-1;background:var(--ink-2);padding:0} .svc--feat::before{display:none} .svc__feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem)} .svc__feat img{width:100%;max-width:340px;justify-self:center;padding:clamp(1.5rem,3vw,2.5rem)} .svc__feat > div{padding:clamp(1.6rem,3.4vw,3rem) clamp(1.6rem,3.4vw,3rem) clamp(1.6rem,3.4vw,3rem) 0} .svc__feat h3{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:.9rem} .svc__feat p{margin-bottom:1.6rem;max-width:52ch} /* ── calculator ────────────────────────────────────────────── */ .calc{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,3vw,2.6rem);align-items:start; } .calc__form{ min-width:0;background:#fff;border:2px solid #111114;padding:clamp(1.4rem,3vw,2.2rem); display:flex;flex-direction:column;gap:1.15rem; box-shadow:8px 8px 0 rgba(0,0,0,.1); } .calc__modes{display:flex;gap:0;border:2px solid #111114;padding:3px} .mode{ flex:1;min-width:0;background:transparent;border:0;cursor:pointer;padding:.75rem .6rem; font:700 .74rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#5a5962; transition:background .22s,color .22s; } .mode.is-on{background:#111114;color:var(--y)} .fld{display:flex;flex-direction:column;gap:.42rem;min-width:0} .fld label,.switch > span{ font:600 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4a4952; } .fld input,.fld select,.fld textarea{ width:100%;min-width:0;background-color:#f6f4ef;border:1.5px solid #c9c4b8;border-radius:2px; padding:.82rem .85rem;color:#111114;font-size:.98rem; transition:border-color .2s,box-shadow .2s,background .2s; } .fld select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .85rem center;background-size:12px; padding-right:2.3rem;cursor:pointer; } .fld input:focus,.fld select:focus,.fld textarea:focus{ outline:0;border-color:#111114;background-color:#fff;box-shadow:0 0 0 3px rgba(255,229,0,.55); } .calc__dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem} .calc__dims.is-hidden{display:none} .switch{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;user-select:none} .switch input{position:absolute;opacity:0;width:1px;height:1px} .switch__box{ width:22px;height:22px;flex:none;border:2px solid #111114;border-radius:2px; background:#fff;position:relative;margin-top:.05rem;transition:background .18s; } .switch__box::after{ content:'';position:absolute;left:6px;top:2px;width:6px;height:11px; border:solid #111114;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0); transition:transform .18s var(--ease); } .switch input:checked + .switch__box{background:var(--y)} .switch input:checked + .switch__box::after{transform:rotate(45deg) scale(1)} .switch input:focus-visible + .switch__box{outline:2px solid var(--m);outline-offset:2px} .switch > span{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:.9rem;font-weight:500;color:#2c2b32} .switch > span em{display:block;font-style:normal;font:400 .68rem/1.5 var(--mono);color:#6a6975;letter-spacing:.06em;margin-top:.15rem} .frm .switch > span{color:#2c2b32} .calc__out{ position:relative;min-width:0;background:#111114;color:var(--fg); padding:clamp(1.5rem,3vw,2.2rem);border:2px solid #111114; box-shadow:8px 8px 0 var(--m); } .calc__lbl{font:600 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d8c96} .calc__total{ font:900 clamp(3.4rem,8vw,5.2rem)/.9 var(--display);color:var(--y); margin:.5rem 0 1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums; } .calc__rows{display:flex;flex-direction:column;gap:.55rem;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px dashed rgba(255,255,255,.2)} .calc__rows div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .calc__rows dt{font:400 .74rem/1.4 var(--mono);letter-spacing:.06em;color:#a3a2ac} .calc__rows dd{font:600 .88rem/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} .calc__note{ font:400 .74rem/1.6 var(--mono);color:var(--c);margin-bottom:1.2rem;min-height:1.2em; } .calc__fine{font-size:.74rem;line-height:1.6;color:#7d7c86;margin-top:1rem} /* ── price tables ──────────────────────────────────────────── */ .tables{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)} .tbl{border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column} .tbl__h{ font-size:1.5rem;text-transform:uppercase;padding:1.1rem 1.3rem;color:#0a0a0a; background:var(--k);letter-spacing:.005em; } .tbl--c{--k:var(--c)}.tbl--m{--k:var(--m)}.tbl--y{--k:var(--y)} .tbl table{flex:1} .tbl tr{border-bottom:1px solid var(--line-2)} .tbl tr:last-child{border-bottom:0} .tbl th{ text-align:left;font-weight:600;font-size:.98rem;padding:1.05rem 1.3rem; display:flex;flex-direction:column;justify-content:center;gap:.15rem; } .tbl th small{font:400 .64rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#75747f} .tbl td{text-align:right;padding:1.05rem 1.3rem;white-space:nowrap;vertical-align:middle} .tbl td b{font:900 1.9rem/1 var(--display);color:var(--k)} .tbl td span{font:400 .68rem/1 var(--mono);color:var(--fg-dim);margin-left:.15rem} .tbl__note{padding:1.1rem 1.3rem;font-size:.86rem;color:var(--fg-dim);border-top:1px solid var(--line-2)} .extras{ margin-top:clamp(1rem,2vw,1.6rem);display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--line-2);border:1px solid var(--line-2); } .extras li{background:var(--ink);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.3rem} .extras__k{font:600 .66rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)} .extras__v{font:900 2.1rem/1 var(--display)} .extras__v small{font:400 .66rem/1 var(--mono);color:var(--fg-dim);margin-left:.2rem} .extras__v--c{color:var(--c)}.extras__v--m{color:var(--m)}.extras__v--y{color:var(--y)} .extras__s{font:400 .68rem/1 var(--mono);color:#6a6975} /* ── gallery ───────────────────────────────────────────────── */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)} .gal__i{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ink-2)} .gal__i--wide{grid-column:span 3} .gal__i img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transition:transform .8s var(--ease),filter .5s} .gal__i--wide img{aspect-ratio:32/11} .gal__i:hover img{transform:scale(1.045)} .gal__i figcaption{ position:absolute;left:0;right:0;bottom:0;padding:3.4rem 1.2rem 1rem; background:linear-gradient(transparent,rgba(5,5,7,.55) 38%,rgba(5,5,7,.94)); display:flex;flex-direction:column;gap:.15rem; } .gal__i figcaption b{font:800 1.25rem/1 var(--display);text-transform:uppercase} .gal__i figcaption span{font:400 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)} .gal__i::after{ content:'';position:absolute;inset:0;border:2px solid transparent; transition:border-color .3s;pointer-events:none; } .gal__i:hover::after{border-color:var(--y)} /* ── why ───────────────────────────────────────────────────── */ .why{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.5rem)} .why__i{position:relative;padding-top:1.4rem;border-top:3px solid var(--k)} .why__i--c{--k:var(--c)}.why__i--m{--k:var(--m)}.why__i--y{--k:var(--y)} .why__n{font:400 .68rem/1 var(--mono);letter-spacing:.2em;color:var(--k);display:block;margin-bottom:.9rem} .why__i h3{font-size:1.42rem;text-transform:uppercase;margin-bottom:.55rem} .why__i p{color:var(--fg-dim);font-size:.92rem} /* ── steps ─────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);counter-reset:s} .step{position:relative;padding:clamp(1.6rem,3vw,2.2rem);border:1px solid var(--line);background:var(--ink-2);overflow:hidden} .step--c{--k:var(--c)}.step--m{--k:var(--m)}.step--y{--k:var(--y)} .step__n{ position:absolute;top:-1.4rem;right:.4rem;font:900 8rem/1 var(--display); color:var(--k);opacity:.13;pointer-events:none; } .step h3{font-size:2rem;text-transform:uppercase;color:var(--k);margin-bottom:.7rem} .step p{color:var(--fg-dim);font-size:.95rem;position:relative} .process__fig{ margin:clamp(2rem,4vw,3rem) 0 0;display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.5rem); flex-wrap:wrap; } .process__fig img{width:min(100%,420px);border:1px solid var(--line)} .process__fig figcaption{ font:900 clamp(2rem,5vw,3.6rem)/1 var(--display);text-transform:uppercase;color:var(--fg); max-width:9ch; } /* ── faq ───────────────────────────────────────────────────── */ .faq{border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa summary{ list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative; font:600 1.12rem/1.4 var(--body);transition:color .2s; } .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--y)} .qa summary::after{ content:'';position:absolute;right:.4rem;top:50%;width:14px;height:2px; background:var(--y);transform:translateY(-50%); } .qa summary::before{ content:'';position:absolute;right:.4rem;top:50%;width:14px;height:2px; background:var(--y);transform:translateY(-50%) rotate(90deg);transition:transform .3s var(--ease); } .qa[open] summary::before{transform:translateY(-50%) rotate(0)} .qa[open] summary{color:var(--y)} .qa > div{padding:0 3rem 1.5rem 0;color:var(--fg-dim);animation:fade .35s var(--ease-out)} .qa em{font-style:normal;color:var(--c)} @keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ── service area ──────────────────────────────────────────── */ .areas{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:start} .areas__copy p{color:var(--fg-dim);margin-bottom:1.1rem;max-width:62ch} .areas__copy p:last-child{margin-bottom:0} .areas__copy strong{color:var(--fg);font-weight:600} .areas__side{border-left:3px solid var(--y);padding-left:clamp(1rem,2vw,1.6rem)} .areas__h3{ font:600 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--y);margin-bottom:1rem; } .areas__h3--wide{margin:clamp(2.5rem,5vw,3.5rem) 0 1.2rem} .areas__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem} .areas__list li{ font:600 .84rem/1.5 var(--body);color:var(--fg); display:flex;align-items:center;gap:.45rem; } .areas__list li::before{content:'';width:.32rem;height:.32rem;background:var(--c);border-radius:50%;flex:none} .areas__list li:nth-child(3n+2)::before{background:var(--m)} .areas__list li:nth-child(3n+3)::before{background:var(--y)} .areas__note{margin-top:1.1rem;font:400 .74rem/1.7 var(--mono);color:#75747f} .jobs{display:flex;flex-wrap:wrap;gap:.5rem} .jobs a{ display:inline-block;border:1px solid var(--line);border-radius:999px; padding:.6rem 1rem;font-size:.88rem;color:var(--fg-dim); transition:border-color .22s,color .22s,transform .22s var(--ease),background .22s; } .jobs a:hover{border-color:var(--y);color:#0a0a0a;background:var(--y);transform:translateY(-2px)} /* ── contact ───────────────────────────────────────────────── */ .ct{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem);align-items:start} .ct__lead{margin-top:1.3rem;color:#4a4952;max-width:40ch} .ct__list{margin-top:2.2rem;display:flex;flex-direction:column;gap:1.35rem} .ct__list li{display:flex;flex-direction:column;gap:.2rem;border-left:3px solid #111114;padding-left:1rem} .ct__k{font:600 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#6a6975} .ct__v{font:800 1.5rem/1.15 var(--display);color:#111114;transition:color .2s} a.ct__v:hover{color:var(--m)} .ct__s{font:400 .74rem/1.5 var(--mono);color:#6a6975} .ct__soc{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.25rem} .ct__soc a{ font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; border-bottom:2px solid var(--m);padding-bottom:.2rem;color:#111114;transition:color .2s,border-color .2s; } .ct__soc a:hover{color:var(--m)} .ct__stamp{ margin-top:2.4rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap; font:600 .74rem/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#111114; } .frm{ position:relative;background:#111114;color:var(--fg); padding:clamp(1.5rem,3.4vw,2.6rem);border:2px solid #111114;box-shadow:10px 10px 0 var(--c); display:flex;flex-direction:column;gap:1.1rem; } .frm__h{font-size:1.85rem;text-transform:uppercase;margin-bottom:.3rem} .frm__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .frm .fld label{color:#a3a2ac} .frm .fld input,.frm .fld select,.frm .fld textarea{ background-color:#1c1c24;border-color:#33333f;color:var(--fg); } .frm .fld select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f5f4f1' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .85rem center;background-size:12px; } .frm .fld input:focus,.frm .fld select:focus,.frm .fld textarea:focus{ background-color:#23232d;border-color:var(--y);box-shadow:0 0 0 3px rgba(255,229,0,.22); } /* native date picker indicator is invisible on the dark form */ .frm .fld input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer} .frm .fld input::placeholder,.frm .fld textarea::placeholder{color:#5f5e6a} .frm .switch__box{border-color:#4a4956;background:#1c1c24} .frm .switch__box::after{border-color:#0a0a0a} .frm .switch > span{color:#cfced6} .frm textarea{resize:vertical;min-height:8rem} .req{color:var(--m)} .err{font:400 .72rem/1.4 var(--mono);color:#ff6b8f;min-height:0} .fld.is-bad input,.fld.is-bad textarea,.fld.is-bad select{border-color:#ff6b8f} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .frm__fine{font-size:.76rem;line-height:1.6;color:#7d7c86} .frm__status{font:600 .84rem/1.5 var(--mono);min-height:1.2em} .frm__status.is-ok{color:var(--y)} .frm__status.is-bad{color:#ff6b8f} .frm.is-sending{opacity:.65;pointer-events:none} /* ── cta strip ─────────────────────────────────────────────── */ .cta{ border-top:3px solid #000; background: radial-gradient(circle at 12% 30%,rgba(0,174,239,.22),transparent 45%), radial-gradient(circle at 88% 70%,rgba(236,0,140,.22),transparent 45%), var(--ink-2); padding-block:clamp(3.5rem,7vw,6rem); } .cta__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap} .cta__t{font-size:clamp(2.4rem,6.5vw,5.4rem);text-transform:uppercase;max-width:13ch;color:#fff} .cta__btns{display:flex;gap:.8rem;flex-wrap:wrap} /* ── footer ────────────────────────────────────────────────── */ .ftr{background:var(--ink);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem)} .ftr__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,4rem);padding-bottom:3rem} .ftr__brand img{width:min(100%,260px)} .ftr__brand p{margin-top:1.3rem;color:var(--fg-dim);font-size:.9rem;max-width:34ch} .ftr__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .ftr__nav h3{ font:600 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--y);margin-bottom:1.1rem; } .ftr__nav a{display:block;padding:.32rem 0;color:var(--fg-dim);font-size:.9rem;transition:color .2s,transform .2s} .ftr__nav a:hover{color:var(--fg);transform:translateX(3px)} .ftr__bar{ border-top:1px solid var(--line-2);padding-block:1.6rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font:400 .72rem/1.5 var(--mono);color:#6a6975; } /* ── touch targets ───────────────────────────────────────────── Pointer-based devices get a ~44px hit area on the links that matter, without changing how any of them look. */ @media (pointer:coarse),(max-width:920px){ .tel{min-height:44px;padding-inline:.35rem;margin-inline:-.35rem} a.ct__v{min-height:44px;display:flex;align-items:center} .ct__soc a{padding-block:.75rem;padding-bottom:.55rem} .mode{min-height:46px} .btn--sm{min-height:44px} .ftr__nav a{padding-block:.6rem} .jobs a{padding-block:.75rem} .tags a{padding-block:.7rem} .pcard__more a{display:inline-flex;align-items:center;min-height:44px} } /* ── mobile quote fab ──────────────────────────────────────── */ .fab{ position:fixed;right:1rem;bottom:1rem;z-index:95;display:none; background:var(--y);color:#0a0a0a;border-radius:2px; font:700 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; padding:1rem 1.2rem;box-shadow:4px 4px 0 var(--m),0 10px 30px rgba(0,0,0,.5); } /* ── responsive ────────────────────────────────────────────── */ @media (max-width:1080px){ .svcs{grid-template-columns:repeat(2,1fr)} .why{grid-template-columns:repeat(3,1fr)} .tables{grid-template-columns:1fr 1fr} .tbl--y{grid-column:1/-1} .extras{grid-template-columns:repeat(2,1fr)} } @media (max-width:920px){ .nav{ position:fixed;inset:0 0 0 auto;width:min(84vw,340px); background:var(--ink-2);border-left:1px solid var(--line); flex-direction:column;gap:0;padding:6rem 1.4rem 2rem; overflow-y:auto;overscroll-behavior:contain; transform:translateX(101%);transition:transform .38s var(--ease); box-shadow:-24px 0 60px rgba(0,0,0,.55); } .nav.is-open{transform:none} body.nav-open{overflow:hidden} .nav a{font-size:1rem;padding:1.05rem .2rem;border-bottom:1px solid var(--line-2)} .nav a::after{left:.2rem;right:.2rem;bottom:.6rem} .burger{display:block;z-index:2} .hdr__cta .btn{display:none} .hero__in{grid-template-columns:minmax(0,1fr)} .hero__fig{order:-1} .calc,.ct,.ftr__in,.areas{grid-template-columns:minmax(0,1fr)} .svc__feat{grid-template-columns:minmax(0,1fr)} .svc__feat > div{padding:0 clamp(1.4rem,4vw,2.4rem) clamp(1.8rem,4vw,2.6rem)} .gal{grid-template-columns:repeat(2,1fr)} .gal__i--wide{grid-column:span 2} .steps{grid-template-columns:1fr} .fab{display:block} .ftr__bar{padding-bottom:5.5rem} /* clear the floating quote button */ .cta__t{max-width:none} } @media (max-width:640px){ html{scroll-padding-top:4.5rem} .svcs,.why,.gal{grid-template-columns:minmax(0,1fr)} .gal__i--wide{grid-column:span 1} .tables{grid-template-columns:minmax(0,1fr)} .tbl--y{grid-column:auto} .extras{grid-template-columns:minmax(0,1fr)} .frm__row,.calc__dims{grid-template-columns:minmax(0,1fr)} .hdr__cta .tel{font-size:.74rem} .brand__txt i{display:none} .gal__i img,.gal__i--wide img{aspect-ratio:4/3} .btn{width:100%} .hero__btns .btn,.cta__btns .btn{width:100%} .process__fig figcaption{max-width:none;font-size:2.2rem} } /* ── motion / print ────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} .js .sech,.js .svc,.js .tbl,.js .why__i,.js .step,.js .gal__i,.js .extras li,.js .qa, .js .calc__form,.js .calc__out,.js .ct__side,.js .frm,.js .cta__t,.js .process__fig, .js .ftr__brand,.js .areas__copy,.js .areas__side{ opacity:1!important;transform:none!important; } .grain{display:none} } @media print{ .hdr,.fab,.grain,.ticker,.cta,.calc__out .btn{display:none} body{background:#fff;color:#000} } /* ═══════════════════════════════════════════════════════════════ WORDPRESS ADDITIONS Everything above is the shared design system. Below: admin bar, nav menus, the blog, comments and editor-generated content. ═══════════════════════════════════════════════════════════════ */ /* ── admin bar + menu markup ────────────────────────────────── */ .admin-bar .hdr{top:32px} @media screen and (max-width:782px){ .admin-bar .hdr{top:46px} } .nav ul{display:contents} .nav li{display:contents} .nav .current-menu-item > a, .nav .current_page_item > a{color:var(--fg)} .nav .current-menu-item > a::after, .nav .current_page_item > a::after{transform:scaleX(1)} /* ── page hero (blog, archives, single, pages) ─────────────── */ .phero{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)} .phero__dots{ position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.1px,transparent 1.2px); background-size:15px 15px; -webkit-mask-image:radial-gradient(110% 90% at 25% 0%,#000 10%,transparent 75%); mask-image:radial-gradient(110% 90% at 25% 0%,#000 10%,transparent 75%); } .phero__splat{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none} .phero__splat--c{width:38vw;height:38vw;background:var(--c);top:-16vw;right:4vw;opacity:.18} .phero__splat--m{width:26vw;height:26vw;background:var(--m);bottom:-14vw;left:-6vw;opacity:.16} .phero__in{position:relative} .phero h1{font-size:clamp(2.4rem,6.5vw,5rem);text-transform:uppercase;max-width:20ch} .phero h1 em{font-style:normal;color:var(--y)} .phero__sub{margin-top:1.2rem;color:var(--fg-dim);max-width:56ch} /* ── post meta ──────────────────────────────────────────────── */ .pmeta{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem; font:400 .7rem/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#75747f; } .pmeta a{color:#9c9ba4;transition:color .2s} .pmeta a:hover{color:var(--y)} .pmeta__sep{width:.3rem;height:.3rem;border-radius:50%;background:var(--m);display:inline-block} .cat{ display:inline-block;font:700 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; background:var(--y);color:#0a0a0a;padding:.4em .6em;transform:skewX(-9deg); } .cat--c{background:var(--c);color:#04222d} .cat--m{background:var(--m);color:#fff} /* ── post grid ──────────────────────────────────────────────── */ .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem)} .pcard{ position:relative;display:flex;flex-direction:column;min-width:0; background:var(--ink-2);border:1px solid var(--line); transition:transform .35s var(--ease),border-color .35s; } .pcard::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--k,var(--c)); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } .pcard:nth-child(3n+2){--k:var(--m)} .pcard:nth-child(3n+3){--k:var(--y)} .pcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.24)} .pcard:hover::before{transform:scaleX(1)} .pcard__thumb{display:block;overflow:hidden;background:var(--ink-3);aspect-ratio:16/10} .pcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .pcard:hover .pcard__thumb img{transform:scale(1.05)} .pcard__thumb--none{display:grid;place-items:center} .pcard__thumb--none span{ font:900 3.4rem/1 var(--display);color:rgba(255,255,255,.07);text-transform:uppercase;letter-spacing:.02em; } .pcard__body{padding:clamp(1.2rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.75rem;flex:1} .pcard__body .pmeta{font-size:.64rem;letter-spacing:.1em;gap:.4rem .7rem} .pcard--lead .pmeta{font-size:.7rem;letter-spacing:.14em} .pcard__t{font-size:1.6rem;text-transform:uppercase;line-height:.95} .pcard__t a{transition:color .2s} .pcard__t a:hover{color:var(--y)} .pcard__x{color:var(--fg-dim);font-size:.94rem;flex:1} .pcard__more{ font:700 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--y); display:inline-flex;align-items:center;gap:.45rem; } .pcard__more span{transition:transform .25s var(--ease)} .pcard:hover .pcard__more span{transform:translateX(4px)} /* ── sticky / featured first post ───────────────────────────── */ .pcard--lead{grid-column:1/-1;flex-direction:row;align-items:stretch} .pcard--lead .pcard__thumb{flex:0 0 52%;aspect-ratio:auto} .pcard--lead .pcard__body{justify-content:center;padding:clamp(1.6rem,3.4vw,3rem)} .pcard--lead .pcard__t{font-size:clamp(2rem,3.6vw,3.1rem)} .pcard--lead .pcard__x{flex:0 1 auto;font-size:1.02rem;max-width:56ch} /* ── article ────────────────────────────────────────────────── */ .article{padding-block:clamp(2.5rem,5vw,4rem)} /* article column sits under the hero headline, matching the site's left-hung grid */ .article__in{max-width:78ch} .article__fig{margin:0 0 clamp(2rem,4vw,3rem);border:1px solid var(--line)} .article__fig img{width:100%} .article__fig figcaption{padding:.9rem 1.1rem;font:400 .72rem/1.6 var(--mono);color:#75747f;border-top:1px solid var(--line)} .prose{max-width:70ch;font-size:1.06rem;line-height:1.75;color:#d6d5dd} .prose > * + *{margin-top:1.35em} .prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);text-transform:uppercase;margin-top:2.2em;color:var(--fg)} .prose h3{font-size:clamp(1.4rem,2.4vw,1.85rem);text-transform:uppercase;margin-top:1.9em;color:var(--fg)} .prose h4{font-family:var(--body);font-size:1.08rem;font-weight:700;margin-top:1.8em;color:var(--fg)} .prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.7em} .prose a{color:var(--c);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;transition:color .2s} .prose a:hover{color:var(--y)} .prose strong{color:var(--fg);font-weight:600} .prose ul,.prose ol{padding-left:1.4em} .prose ul{list-style:none;padding-left:0} .prose ul li{position:relative;padding-left:1.5em;margin-top:.55em} .prose ul li::before{content:'';position:absolute;left:.15em;top:.62em;width:.42em;height:.42em;background:var(--m);transform:rotate(45deg)} .prose ol{list-style:decimal} .prose ol li{margin-top:.55em;padding-left:.3em} .prose ol li::marker{font-family:var(--mono);font-size:.82em;color:var(--y)} .prose blockquote{ margin-inline:0;padding:.2rem 0 .2rem 1.5rem;border-left:3px solid var(--y); font-size:1.22rem;line-height:1.55;color:var(--fg);font-weight:500; } .prose blockquote cite{display:block;margin-top:.7rem;font:400 .74rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#75747f;font-style:normal} .prose code{font:400 .88em/1.6 var(--mono);background:var(--ink-3);padding:.15em .4em;border-radius:2px;color:var(--y)} .prose pre{background:var(--ink-3);border:1px solid var(--line);padding:1.2rem;overflow-x:auto;border-radius:2px} .prose pre code{background:none;padding:0;color:#d6d5dd} .prose img,.prose video,.prose iframe{max-width:100%;height:auto;border:1px solid var(--line)} .prose figure{margin-inline:0} .prose figcaption{margin-top:.7rem;font:400 .74rem/1.6 var(--mono);color:#75747f} .prose hr{border:0;height:3px;background:linear-gradient(90deg,var(--c) 0 33.3%,var(--m) 33.3% 66.6%,var(--y) 66.6%);margin-block:2.6em} .prose table{width:100%;border:1px solid var(--line);font-size:.95rem} .prose th,.prose td{padding:.75rem 1rem;border-bottom:1px solid var(--line-2);text-align:left} .prose th{background:var(--ink-3);font-weight:600} .prose .wp-caption{max-width:100%} .prose .alignleft{float:left;margin:0 1.6rem 1.2rem 0} .prose .alignright{float:right;margin:0 0 1.2rem 1.6rem} .prose .aligncenter{margin-inline:auto;display:block} .prose .wp-block-image{margin-inline:0} .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line)} .tags a{ border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem; font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:var(--fg-dim); transition:border-color .2s,color .2s,background .2s; } .tags a:hover{border-color:var(--y);background:var(--y);color:#0a0a0a} /* ── prev / next ────────────────────────────────────────────── */ .postnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(2.5rem,5vw,4rem)} .postnav a{background:var(--ink);padding:clamp(1.3rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.5rem;transition:background .3s} .postnav a:hover{background:var(--ink-3)} .postnav a:last-child:not(:only-child){text-align:right;align-items:flex-end} .postnav span{font:600 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--y)} .postnav b{font:800 1.2rem/1.15 var(--display);text-transform:uppercase;color:var(--fg)} .pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem)} .pager .page-numbers{ min-width:2.9rem;height:2.9rem;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);font:600 .82rem/1 var(--mono);color:var(--fg-dim);padding-inline:.8rem; transition:border-color .2s,color .2s,background .2s; } .pager .page-numbers:hover{border-color:var(--y);color:var(--y)} .pager .page-numbers.current{background:var(--y);border-color:var(--y);color:#0a0a0a} /* ── comments ───────────────────────────────────────────────── */ .comments{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)} .comments__h{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;margin-bottom:1.8rem} .clist{display:flex;flex-direction:column;gap:1.4rem} .clist ol{list-style:none;padding-left:clamp(1rem,3vw,2.5rem);margin-top:1.4rem;display:flex;flex-direction:column;gap:1.4rem} .cmt{background:var(--ink-2);border:1px solid var(--line);padding:clamp(1.1rem,2.2vw,1.6rem)} .cmt__top{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap} .cmt__top img{border-radius:50%;flex:none} .cmt__who{font:700 .95rem/1.2 var(--body);color:var(--fg)} .cmt__when{font:400 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#75747f} .cmt__body{color:var(--fg-dim);font-size:.96rem} .cmt__body > * + *{margin-top:.9em} .cmt .reply a{font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--y)} .comment-respond{margin-top:2.2rem} .comment-reply-title{font-size:1.5rem;text-transform:uppercase;margin-bottom:1.2rem;font-family:var(--display);font-weight:900} .comment-form{display:flex;flex-direction:column;gap:1rem;max-width:44rem} .comment-form p{display:flex;flex-direction:column;gap:.42rem;margin:0} .comment-form label{font:600 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a3a2ac} .comment-form input[type="text"],.comment-form input[type="email"], .comment-form input[type="url"],.comment-form textarea{ width:100%;min-width:0;background-color:#1c1c24;border:1.5px solid #33333f;border-radius:2px; padding:.82rem .85rem;color:var(--fg);font-size:.98rem; } .comment-form textarea{resize:vertical;min-height:8rem} .comment-form input:focus,.comment-form textarea:focus{ outline:0;border-color:var(--y);background-color:#23232d;box-shadow:0 0 0 3px rgba(255,229,0,.22); } .comment-form .form-submit{margin-top:.4rem} .comment-form input[type="submit"]{ display:inline-flex;align-items:center;justify-content:center; font:700 .82rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; padding:1.05rem 1.6rem;border:2px solid transparent;border-radius:2px;cursor:pointer; background:var(--y);color:#0a0a0a;box-shadow:4px 4px 0 var(--m); transition:transform .22s var(--ease),box-shadow .22s var(--ease); } .comment-form input[type="submit"]:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--m)} .comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:.6rem} .comment-form .comment-form-cookies-consent label{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:.9rem} /* ── search form ────────────────────────────────────────────── */ .sform{display:flex;gap:.5rem;max-width:34rem;margin-top:1.6rem} .sform input[type="search"]{ flex:1;min-width:0;background-color:var(--ink-3);border:1.5px solid var(--line);border-radius:2px; padding:.9rem 1rem;color:var(--fg);font-size:1rem; } .sform input[type="search"]:focus{outline:0;border-color:var(--y);box-shadow:0 0 0 3px rgba(255,229,0,.2)} /* ── empty / 404 ────────────────────────────────────────────── */ .empty{padding-block:clamp(3rem,7vw,6rem);text-align:center} .empty h2{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;margin-bottom:1rem} .empty p{color:var(--fg-dim);max-width:46ch;margin-inline:auto} .empty .sform{margin-inline:auto} /* ── the quote form inside WP ───────────────────────────────── */ .frm__status.is-ok{color:var(--y)} /* ── blog responsive ────────────────────────────────────────── */ @media (max-width:1080px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} .pcard--lead{flex-direction:column} .pcard--lead .pcard__thumb{flex:none;aspect-ratio:16/9} } @media (max-width:640px){ .posts{grid-template-columns:minmax(0,1fr)} .postnav{grid-template-columns:minmax(0,1fr)} .postnav a:last-child{text-align:left;align-items:flex-start} .prose{font-size:1.02rem} }