/* ------------------------------------------------------------------ thinknaz.com, deferred styles. Shared by every page. Layout and appearance are inlined in each page's . This file loads without blocking the first paint, so it holds ONLY what can arrive late without anything visibly snapping into place: interaction states, animation, very wide viewports, print. Do not put base appearance here. If a rule changes how something looks at rest, it belongs in the inlined block, or it will paint unstyled and then jump. ------------------------------------------------------------------ */ /* --- navigation -------------------------------------------------------- */ .nav__word,.nav__link,.footer__word{transition:color .18s ease} .nav__mark:hover .nav__word{color:var(--amber)} .nav__link:hover{color:var(--text)} .nav__cta{transition:opacity .16s ease} .nav__cta:hover{opacity:.86} .nav__mark .mark,.footer__mark .mark{transition:transform .22s cubic-bezier(.2,.7,.3,1)} .nav__mark:hover .mark,.footer__mark:hover .mark{transform:translate(1.5px,-1.5px)} /* --- buttons ----------------------------------------------------------- */ .btn{transition:opacity .18s ease,border-color .18s ease,background-color .18s ease} .btn--primary:hover{opacity:.88} .btn--primary:hover .btn__arrow{transform:translateX(3px)} .btn--ghost:hover{border-color:rgba(243,240,232,.5)} /* --- company rows ------------------------------------------------------- */ /* The row warms toward its own company colour rather than a generic hover, so the gesture and the identifying rule read as one thing. */ .crow{transition:background-color .22s ease} .crow:hover{background:var(--surface)} .crow__cta{transition:color .18s ease} .crow__cta:hover{color:var(--co)} .crow__cta:hover i{transform:translateX(4px)} .crow__tags li{transition:border-color .18s ease,color .18s ease} .crow:hover .crow__tags li{border-color:var(--line)} /* --- thesis, principles, pathways ---------------------------------------- */ .link,.pr,.path{transition:background-color .2s ease} .path__l{transition:color .18s ease} .path__l:hover{color:var(--pc)} /* --- blog ---------------------------------------------------------------- */ .post{transition:border-color .22s ease,transform .22s ease} .post:hover{border-color:var(--pc)} .post:hover{transform:translateY(-2px)} .post__t a{transition:color .18s ease} .post:hover .post__t a{color:var(--pc)} .backlink,.more__l a,.art__cta a{transition:color .18s ease,border-color .18s ease} .backlink:hover{color:var(--text)} .more__l a{border-bottom:1px solid transparent;padding-bottom:.125rem} .more__l a:hover{border-bottom-color:var(--amber)} .art__cta a:hover{color:var(--ac)} /* --- links ---------------------------------------------------------------- */ .prose a,.direct a,.textlink,.pcos a{transition:color .18s ease,border-color .18s ease} .prose a:hover,.pcos a:hover{color:var(--text);border-bottom-color:var(--amber)} .textlink:hover{color:var(--amber)} .footer a{border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease} .footer a:hover{color:var(--text);border-bottom-color:var(--amber)} /* --- form, live once a post carries a capture ------------------------------ */ .form__input{transition:border-color .18s ease} .form__input::placeholder{color:var(--muted);opacity:.8} .form__input:hover{border-color:var(--muted)} .form__input:focus-visible{outline:2px solid var(--cyan);outline-offset:-1px;border-color:transparent} .form__input[aria-invalid="true"]{border-color:var(--amber)} .form__button{transition:opacity .18s ease} .form__button:hover{opacity:.88} .form__button:disabled{cursor:default;opacity:.6} .form__button[aria-busy="true"] .form__button-label{animation:tn-pulse 1.1s ease-in-out infinite} @keyframes tn-pulse{0%,100%{opacity:1}50%{opacity:.45}} .success{ display:flex;gap:.75rem;margin-top:1rem; font-size:1rem;line-height:1.6;color:var(--text); animation:tn-rise .32s cubic-bezier(.2,.7,.3,1) both; } .success::before{content:"";flex:0 0 auto;width:3px;align-self:stretch;background:var(--amber)} .success:focus{outline:none} .success:focus-visible{outline:2px solid var(--cyan);outline-offset:4px} @keyframes tn-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* --- very wide viewports ---------------------------------------------------- */ /* The container is capped at 1180px, so past roughly 1600px the root size steps up instead. Everything is in rem, so that is the only lever needed. */ @media (min-width:100em){html{font-size:17.5px}} @media (min-width:160em){html{font-size:18.5px}} /* --- reduced motion ---------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .success{animation:none} .form__button[aria-busy="true"] .form__button-label{animation:none;opacity:.6} .btn--primary:hover .btn__arrow, .post:hover, .crow__cta:hover i, .nav__mark:hover .mark, .footer__mark:hover .mark{transform:none} } /* --- forced colours ------------------------------------------------------------ */ @media (forced-colors:active){ .crow,.path,.pr,.link,.post,.empty,.book,.art__cta{border-color:CanvasText} .crow:hover,.post:hover{background:Highlight;color:HighlightText} .btn--primary,.nav__cta{border:1px solid CanvasText} .success::before,.prose li::before,.art__body li::before{background:CanvasText} } /* --- print ---------------------------------------------------------------------- */ @media print{ .topbar,.cta-row,.footer,.hero__field,.hero__grid,.hero__scrim{display:none} .crow,.path,.pr,.post,.link{break-inside:avoid} body{font-size:11pt;background:#fff;color:#000} }