/* ================================================================== QALIBRE — site.css 1. Fonts (self-hosted; no Google Fonts CDN) 2. The client's stylesheet, unchanged (versions v2.1 to v13) 3. Site additions (language links, legal links, contact form states, reduced motion, legal pages) ================================================================== */ /* ---- 1. Fonts: Cormorant Garamond 400/500/600, Inter 400/500/600/700 (SIL Open Font License, see /fonts/LICENSE-*.txt) ---- */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---- 2. Client stylesheet (qalibre-site (14), 2026-09-29) ---- */ :root{ --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-body:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --h1:clamp(2.15rem,3.9vw,3.4rem); --h2:clamp(1.5rem,2.4vw,2.1rem); --h3:1.18rem; --ink:#0E2138; --paper:#F4F0E6; --paper-2:#E9E2D4; --line:rgba(14,33,56,.20); --gold:#B06E3E; --gold-soft:#E2B48E; --white:#FBF8F1; --muted:#5D6A7A; --gold-deep:#8A5228; --max:1240px; --radius:18px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.68;-webkit-font-smoothing:antialiased} h1,h2,h3,.brand{font-family:var(--font-display);font-weight:600;line-height:1.16} h1{font-size:var(--h1);letter-spacing:-.005em;line-height:1.12;margin:.24em 0} h2{font-size:var(--h2);letter-spacing:-.003em;margin:.24em 0 .55em;max-width:24ch} h2.wide{max-width:none} h3{font-size:var(--h3);letter-spacing:0;line-height:1.3;margin:.3em 0 .5em} .brand{font-weight:600;letter-spacing:.005em} p{margin:.3em 0 1em} a{color:inherit} img{max-width:100%;display:block} .container{width:min(var(--max),calc(100% - 48px));margin:auto} .narrow{max-width:860px} .section{padding:110px 0} .alt{background:var(--paper-2)} .eyebrow,.kicker,.subheading{font-size:.785rem;text-transform:uppercase;letter-spacing:.115em;font-weight:600;color:#7E6A55;margin-bottom:6px} .section-intro{max-width:760px;font-size:1.02rem;line-height:1.66} .site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(245,242,235,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .brand{text-decoration:none;font-size:1.12rem} .desktop-nav{display:flex;align-items:center;gap:22px;font-size:.88rem} .desktop-nav a{text-decoration:none} .nav-cta{padding:10px 14px;border:1px solid var(--ink)} .lang-toggle,.menu-toggle{background:transparent;border:0;font:inherit;cursor:pointer} .menu-toggle{display:none;font-size:1.4rem} .hero{min-height:100vh;color:var(--white);position:relative;display:flex;align-items:flex-end;background-image:var(--bg),linear-gradient(135deg,#0E2138,#3A4A5C);background-size:cover;background-position:center} .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.12) 60%,rgba(0,0,0,.25))} .hero-content{position:relative;padding-top:160px;padding-bottom:60px} .hero .eyebrow{color:var(--gold-soft)} .hero .lead{font-size:clamp(1.02rem,1.2vw,1.14rem);max-width:700px;line-height:1.66} .hero p{max-width:880px} .actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 44px} .btn{display:inline-flex;padding:13px 18px;text-decoration:none;border:1px solid currentColor;cursor:pointer} .btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn.ghost{color:var(--white)} .btn.dark{background:var(--ink);color:var(--white);border:0} .micro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid rgba(255,255,255,.35);padding-top:22px} .micro-grid span{display:block;color:var(--gold-soft);font-size:.75rem;margin-bottom:6px} .problem blockquote{font-family:var(--font-display);font-size:1.32rem;line-height:1.42;font-style:italic;margin:50px 0 0;padding-left:24px;border-left:2px solid var(--gold)} .service-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px} .service-card{background:#FBF8F1;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .service-card>img{width:100%;height:340px;object-fit:cover;background:#E9E2D4} .card-body{padding:28px} .tagline{font-size:1rem;font-weight:500} details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:20px 0} summary{cursor:pointer;font-weight:700} .text-link{display:inline-block;margin-top:15px;font-weight:700;text-decoration:none;border-bottom:1px solid} .deliverables-line{font-size:.92rem;color:var(--muted)} .extension-card{margin-top:24px;border:1px solid var(--line);padding:28px;border-radius:var(--radius);display:grid;grid-template-columns:.9fr 1.3fr 1fr;gap:30px;background:rgba(255,255,255,.45)} .table-wrap{overflow-x:auto;margin-top:36px} .comparison-table{width:100%;border-collapse:collapse;min-width:780px} .comparison-table th,.comparison-table td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left} .comparison-table thead th{font-family:var(--font-display);font-size:1.08rem;font-weight:500} .callout{margin-top:28px;padding:22px 24px;border-left:3px solid var(--gold);background:rgba(255,255,255,.5)} .callout.soft{border-left-color:#95A1AF} .deliverables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px} .deliverables-grid article{padding:24px;border:1px solid var(--line);background:#FBF8F1;min-height:250px} .deliverables-grid article>span,.steps article>span{font-size:.8rem;letter-spacing:.06em;color:#8A5228} .deliverables-grid small{color:var(--muted)} .debrief-note{margin:28px 0} .low-cta{margin-top:36px;background:var(--ink);color:var(--white);padding:26px;display:flex;align-items:center;justify-content:space-between;gap:22px} .mini-form{display:flex;gap:8px} .mini-form input{padding:13px 14px;border:0;min-width:260px} .mini-form button{padding:13px 16px;border:0;background:var(--gold);cursor:pointer} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px} .steps article{border-top:1px solid var(--ink);padding-top:18px} .dimension-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px} .dimension-grid article{padding:20px;background:#FBF8F1;border:1px solid var(--line)} .weights-note{max-width:920px;color:var(--muted);margin:28px 0} .scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:26px 0} .scale div{padding:20px;background:var(--ink);color:#F6F2E8;min-height:200px} .scale strong{font-size:1.75rem;font-family:var(--font-display);font-weight:600;color:var(--gold-soft);display:block} .scale span{font-weight:700;display:block;margin:6px 0 12px} .sector-focus{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px} .sector-extended{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .subheading{margin:36px 0 14px} .sector-card{position:relative;overflow:hidden;background:#0E2138;color:#F6F2E8;min-height:280px} .sector-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62} .sector-card>div{position:absolute;inset:auto 0 0;padding:22px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)} .sector-card.large{min-height:440px} .sector-card span{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-soft)} .bio-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:start} .bio-image img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#E9E2D4} .bio-emphasis{font-weight:500;font-size:1.02rem} .principles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px} .principles div{padding:14px;border-top:1px solid var(--line)} .principles span{display:block;font-size:.75rem;color:#8A5228} .ethics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px} .ethics-grid article{padding:22px;background:#FBF8F1;border:1px solid var(--line)} .senior-limit{margin-top:18px;padding:28px;background:#0E2138;color:#F6F2E8} .contact{background:#E7DCCA} .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px} .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:500;letter-spacing:.04em} .contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px;border:1px solid rgba(0,0,0,.28);background:rgba(255,255,255,.72);font:inherit} .full{grid-column:1/-1} .privacy-note{font-size:.78rem;color:#4E5A6A;margin-top:8px} footer{background:#0A192C;color:#F6F2E8;padding:42px 0} .footer-grid{display:flex;justify-content:space-between;gap:30px} .footer-right{text-align:right;color:#B7C1CD} .toast{position:fixed;right:20px;bottom:20px;background:#0E2138;color:#F6F2E8;padding:12px 16px;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:80} .toast.show{opacity:1;transform:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:1000px){ .desktop-nav{display:none} .desktop-nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);padding:20px;border-bottom:1px solid var(--line)} .menu-toggle{display:block} .service-grid,.sector-focus,.bio-grid,.contact-grid{grid-template-columns:1fr} .extension-card{grid-template-columns:1fr} .deliverables-grid{grid-template-columns:1fr 1fr} .steps,.dimension-grid,.scale{grid-template-columns:1fr 1fr} .sector-extended{grid-template-columns:1fr 1fr} .ethics-grid{grid-template-columns:1fr 1fr} } @media(max-width:650px){ .container{width:min(100% - 28px,var(--max))} .section{padding:76px 0} h2{max-width:none} .micro-grid,.deliverables-grid,.steps,.dimension-grid,.scale,.sector-extended,.ethics-grid,.principles,.contact-form{grid-template-columns:1fr} .mini-form{flex-direction:column;width:100%} .mini-form input{min-width:0;width:100%} .low-cta,.footer-grid{flex-direction:column;align-items:flex-start} .footer-right{text-align:left} .service-card>img{height:240px} } /* ---- Completari v2.1: accesibilitate, formular, footer ---- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#F6F2E8;padding:12px 16px} .skip-link:focus{left:12px;top:12px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important} .consent{flex-direction:row!important;align-items:flex-start;gap:10px;font-weight:400!important;font-size:.82rem;line-height:1.5} .consent input{width:auto;flex:0 0 auto;margin-top:3px} .consent a{text-decoration:underline} .form-status{margin-top:12px;font-size:.9rem;font-weight:700;min-height:1.2em} .contact-form button[disabled]{opacity:.6;cursor:progress} .footer-right a{color:#B7C1CD} .footer-right a:hover{color:#F6F2E8} .deliverables-grid article{display:flex;flex-direction:column} .deliverables-grid small{margin-top:auto;padding-top:14px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{transition:none}} .comparison-table td[colspan="2"]{background:rgba(255,255,255,.55);font-size:.95rem} /* ---- v3: trei servicii, comparatie pe trei coloane, banda de parcurs ---- */ .service-grid.three{grid-template-columns:repeat(3,1fr);gap:20px} .service-grid.three .service-card>img{height:260px} .service-grid.three .card-body{padding:24px} .service-grid.three h3{font-size:1.14rem} .comparison-table.three{min-width:1000px} .comparison-table.three thead th{width:26%} .comparison-table.three thead th:first-child{width:22%} .comparison-table.three thead th em{display:block;font-family:var(--font-body);font-size:.8rem; font-weight:400;font-style:italic;color:var(--muted);margin-top:5px;letter-spacing:0} .callout h3{margin-top:0;font-size:1.14rem} .callout p:last-child{margin-bottom:0} .difference .lead-para{font-size:1.08rem;font-weight:500;max-width:620px;line-height:1.6} .journey{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:38px; border-top:1px solid var(--line);padding-top:26px} .journey span{font-family:var(--font-display);font-size:1.14rem;font-weight:500} .journey span+span::before{content:"→";display:inline-block;margin-right:10px;color:var(--gold);font-family:var(--font-body)} .micro-grid span{font-size:.78rem;letter-spacing:.05em;text-transform:none;font-weight:600} @media(max-width:1000px){ .service-grid.three{grid-template-columns:1fr} .service-grid.three .service-card>img{height:240px} } @media(max-width:650px){ .journey{gap:6px} .journey span{font-size:1.05rem} } /* ---- v3.1: note de adaptare, parcurs in card, imagine in asteptare ---- */ .adapt-note{font-size:.86rem;color:var(--muted);font-style:italic;margin:12px 0 0} .table-note{margin-top:22px;font-size:.95rem;max-width:900px} .flow-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 14px} .flow-line span{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:#8A5228} .flow-line span+span::before{content:"→";margin-right:8px;color:var(--gold)} .image-pending{height:260px;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#E9E2D4,#E9E2D4 12px,#E2DACB 12px,#E2DACB 24px); border-bottom:1px solid var(--line)} .image-pending span{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:#7E6A55} @media(max-width:1000px){.image-pending{height:240px}} :root{--hw:500;--hls:-.004em} h1,h2,h3,.brand{font-weight:var(--hw)!important} h1,h2{letter-spacing:var(--hls)!important} .lang-toggle{cursor:pointer;background:transparent;border:0;font:inherit} .foot-word{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:500;letter-spacing:.2em;padding-left:.2em} .foot-word .q{color:var(--gold-soft)} .foot-descriptor{display:block;margin-top:6px;font-size:.52rem;letter-spacing:.3em;padding-left:.3em;font-weight:600;color:var(--gold-soft)} .foot-tagline{margin-top:12px!important;font-family:var(--font-display);font-style:italic;font-size:.98rem;color:#B7C1CD} /* ---- QALIBRE brand lockup ---- */ .site-header{height:86px;padding:0 26px;background:rgba(244,240,230,.94)} .q-brand{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:214px;min-width:214px;text-decoration:none;color:var(--ink);line-height:1} .q-marks{display:block;width:74px;height:23px;margin-bottom:7px;overflow:visible} .q-marks line{stroke:var(--ink);stroke-width:1.3;opacity:.45} .q-marks line.mid{stroke:var(--gold);stroke-width:1.7;opacity:1} .q-word{font-family:var(--font-display);font-size:1.6rem;font-weight:500!important;letter-spacing:.22em;padding-left:.22em;color:var(--ink);white-space:nowrap} .q-word .q{color:var(--gold)} .q-descriptor{margin-top:7px;font-family:var(--font-body);font-size:.46rem;letter-spacing:.34em;padding-left:.34em;font-weight:600;color:var(--gold-deep);white-space:nowrap} .q-marks line{transform-origin:center bottom;animation:qRise .85s cubic-bezier(.2,.8,.2,1) both} .q-marks line:nth-child(1){animation-delay:.05s} .q-marks line:nth-child(2){animation-delay:.13s} .q-marks line:nth-child(3){animation-delay:.21s} .q-marks line:nth-child(4){animation-delay:.29s} .q-marks line:nth-child(5){animation-delay:.37s} @keyframes qRise{from{transform:scaleY(.12);opacity:0}to{transform:scaleY(1);opacity:1}} @media(max-width:1000px){.desktop-nav.open{top:86px}.site-header{height:82px}.q-brand{width:196px;min-width:196px;transform:scale(.93);transform-origin:left center}} @media(max-width:650px){.site-header{height:76px;padding:0 14px}.q-brand{width:172px;min-width:172px;transform:scale(.82);transform-origin:left center}.desktop-nav.open{top:76px}} @media(prefers-reduced-motion:reduce){.q-marks line{animation:none}} /* ---- v4: navy / ivory / copper + Q button in wordmark ---- */ :root{ --navy:#0B2239; --navy-deep:#071A2C; --ivory:#F4F0E6; --ivory-soft:#E9E2D4; --copper:#B86F3A; --copper-light:#E0A275; } /* Header stays a dark navy anchor; layout/content remain unchanged. */ .site-header{ background:rgba(7,26,44,.96)!important; border-bottom:1px solid rgba(244,240,230,.14)!important; box-shadow:0 8px 28px rgba(4,16,28,.10); } .site-header .desktop-nav a, .site-header .lang-toggle, .site-header .menu-toggle{color:var(--ivory)!important} .site-header .nav-cta{border-color:var(--copper)!important;color:var(--ivory)!important} .site-header .nav-cta:hover{background:var(--copper);color:var(--navy-deep)!important} /* Preserve the five-bar symbol above QALIBRE. */ .q-marks line{stroke:var(--ivory)!important;opacity:.72!important} .q-marks line.mid{stroke:var(--copper)!important;opacity:1!important} .q-word{ display:inline-flex; align-items:center; justify-content:center; gap:.04em; padding-left:0!important; color:var(--ivory)!important; letter-spacing:.22em; } .q-rest{color:var(--ivory)} .q-descriptor{color:var(--copper-light)!important} /* The Q inside the wordmark becomes the circular button/signet. */ .q-word .q-button{ position:relative; display:inline-block; width:1.03em; height:1.03em; flex:0 0 1.03em; border:1.45px solid var(--ivory); border-radius:50%; margin-right:.05em; transform:translateY(.015em); } .q-word .q-button::after{ content:""; position:absolute; width:.42em; height:1.6px; right:-.19em; bottom:.07em; background:var(--copper); border-radius:2px; transform:rotate(43deg); transform-origin:left center; box-shadow:0 0 8px rgba(184,111,58,.22); } .q-word .q-button::before{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid transparent; transition:border-color .2s ease, background .2s ease; } .q-brand:hover .q-word .q-button::before{ border-color:rgba(224,162,117,.36); background:rgba(184,111,58,.05); } /* First screen receives a distinctly navy cast without changing its image or composition. */ .hero{background-color:var(--navy-deep)!important} .hero .overlay{ background: linear-gradient(to top,rgba(4,21,37,.88),rgba(8,34,57,.30) 58%,rgba(4,21,37,.52)), linear-gradient(90deg,rgba(6,27,47,.42),rgba(6,27,47,.08) 58%,rgba(6,27,47,.20))!important; } /* Keep the existing ivory/navy rhythm but unify copper accents. */ body{background:var(--ivory)} .alt{background:var(--ivory-soft)} .eyebrow,.kicker,.subheading{color:#87694F} .low-cta,.senior-limit,.scale div,footer{background:var(--navy-deep)!important} .sector-card{background:var(--navy-deep)!important} .btn.dark{background:var(--navy-deep)!important} @media(max-width:1000px){ .desktop-nav.open{background:rgba(7,26,44,.985)!important;border-bottom-color:rgba(244,240,230,.14)!important} } /* ---- v5: stronger navy / luminous copper / clean ivory + refined QALIBRE lockup ---- */ :root{ --navy:#0A243D; --navy-deep:#061B2E; --navy-mid:#123954; --ivory:#F7F2E8; --ivory-soft:#EFE7D9; --ivory-card:#FBF7EF; --copper:#D57B43; --copper-bright:#F0A873; --copper-light:#F5C29B; --copper-deep:#A95228; --paper:var(--ivory); --paper-2:var(--ivory-soft); --ink:var(--navy); --gold:var(--copper); --gold-soft:var(--copper-bright); --gold-deep:var(--copper-deep); --white:#FFFDF8; } body{background:var(--ivory)!important;color:var(--navy)!important} .section{background:var(--ivory)} .alt{background:var(--ivory-soft)!important} .service-card,.deliverables-grid article,.dimension-grid article,.ethics-grid article{background:var(--ivory-card)!important} .contact{background:#EDE3D3!important} /* Strong navy first screen and header; no layout changes. */ .site-header{ background:rgba(6,27,46,.975)!important; border-bottom:1px solid rgba(247,242,232,.15)!important; box-shadow:0 8px 32px rgba(3,15,27,.18)!important; } .hero{ background-color:var(--navy-deep)!important; background-blend-mode:soft-light,normal; } .hero .overlay{ background: linear-gradient(90deg,rgba(5,29,49,.62) 0%,rgba(8,36,60,.28) 52%,rgba(5,23,39,.20) 100%), linear-gradient(to top,rgba(4,24,41,.87) 0%,rgba(9,39,64,.30) 56%,rgba(6,28,47,.46) 100%)!important; } /* Copper should read as copper, not muted gold. */ .eyebrow,.kicker,.subheading, .deliverables-grid article>span,.steps article>span, .flow-line span,.sector-card span,.principles span{ color:var(--copper)!important; } .hero .eyebrow,.micro-grid span,.scale strong,.foot-word .q,.foot-descriptor{ color:var(--copper-bright)!important; text-shadow:0 0 12px rgba(240,168,115,.16); } .problem blockquote,.callout{border-left-color:var(--copper)!important} .journey span+span::before,.flow-line span+span::before{color:var(--copper-bright)!important} .btn,.nav-cta{border-color:var(--copper)!important} .btn.primary{background:var(--ivory)!important;color:var(--navy-deep)!important;border-color:var(--ivory)!important} .btn.ghost{color:var(--ivory)!important;border-color:var(--copper-bright)!important} .mini-form button{background:var(--copper)!important;color:var(--navy-deep)!important} /* A subtle metallic-copper treatment where the brand uses copper. */ .q-descriptor{ color:var(--copper-bright)!important; font-size:.50rem!important; letter-spacing:.31em!important; font-weight:700!important; text-shadow:0 0 9px rgba(240,168,115,.16); } /* Keep bars; make QALIBRE slightly heavier and the Q a true button/signet. */ .q-brand{width:228px;min-width:228px} .q-marks{width:76px;height:23px;margin-bottom:7px} .q-marks line{stroke:rgba(247,242,232,.86)!important;stroke-width:1.4!important;opacity:.88!important} .q-marks line.mid{stroke:var(--copper-bright)!important;stroke-width:1.9!important;opacity:1!important;filter:drop-shadow(0 0 3px rgba(240,168,115,.22))} .q-word{ font-size:1.70rem!important; font-weight:600!important; letter-spacing:.185em!important; gap:.055em!important; color:var(--ivory)!important; text-shadow:0 1px 0 rgba(255,255,255,.03); } .q-rest{color:var(--ivory)!important} .q-word .q-button{ width:1.05em!important;height:1.05em!important;flex-basis:1.05em!important; border:1.8px solid var(--copper-bright)!important; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.08),rgba(255,255,255,0) 44%),var(--navy-deep)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 12px rgba(213,123,67,.14)!important; } .q-word .q-button::after{ width:.44em!important;height:2px!important;right:-.20em!important;bottom:.08em!important; background:linear-gradient(90deg,var(--copper-deep),var(--copper-bright) 55%,var(--copper))!important; box-shadow:0 0 7px rgba(240,168,115,.26)!important; } .q-word .q-button::before{inset:-5px!important;border-color:rgba(240,168,115,.10)!important} .q-brand:hover .q-word .q-button::before{border-color:rgba(240,168,115,.46)!important;background:rgba(213,123,67,.06)!important} /* Tone dark photographic backgrounds toward navy while keeping warm highlights. */ .image-tint{position:relative;overflow:hidden;background:var(--navy-deep)} .service-grid.three .image-tint{height:260px} .image-tint img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.96) brightness(1.03)} .image-tint::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(135deg,rgba(11,43,70,.30),rgba(10,36,61,.12) 58%,rgba(213,123,67,.055)); } .sector-card{background:var(--navy-deep)!important} .sector-card img{opacity:.72!important;filter:saturate(.82) contrast(.95) brightness(.98)} .sector-card>div{background:linear-gradient(to top,rgba(4,25,42,.93),rgba(7,31,51,.42) 58%,transparent)!important} .bio-image{background:var(--navy-deep);overflow:hidden} .bio-image img{opacity:.94;filter:saturate(.86) contrast(.97) brightness(1.02)} /* Dark surfaces use the same navy family. */ .low-cta,.senior-limit,.scale div,footer{background:var(--navy-deep)!important} .low-cta,.senior-limit,.scale div,footer{color:var(--ivory)!important} .sector-card{color:var(--ivory)!important} @media(max-width:1000px){ .q-brand{width:210px;min-width:210px} .service-grid.three .image-tint{height:240px} } @media(max-width:650px){ .q-brand{width:184px;min-width:184px} .q-word{font-size:1.58rem!important} .q-descriptor{font-size:.46rem!important;letter-spacing:.28em!important} } /* ---- v6: lighter first page, ivory top band, stronger logo lockup ---- */ :root{ --navy:#0B2740; --navy-deep:#0A2136; --navy-mid:#163C58; --ivory:#F7F3EA; --ivory-soft:#EFE8DB; --ivory-card:#FCF8F0; --copper:#D78046; --copper-bright:#F2AF80; --copper-light:#F7C7A2; --copper-deep:#AF5E2D; } /* Top band returns to ivory for a cleaner transition against the hero image */ .site-header{ background:rgba(247,243,234,.96)!important; border-bottom:1px solid rgba(11,39,64,.10)!important; box-shadow:0 10px 26px rgba(10,33,54,.08)!important; } .site-header .desktop-nav a, .site-header .lang-toggle, .site-header .menu-toggle{color:var(--navy)!important} .site-header .nav-cta{ color:var(--navy)!important; border-color:rgba(215,128,70,.72)!important; } .site-header .nav-cta:hover{background:var(--copper)!important;color:var(--ivory)!important} @media(max-width:1000px){ .desktop-nav.open{background:rgba(247,243,234,.985)!important;border-bottom-color:rgba(11,39,64,.10)!important} } /* Logo colours and weight like the reference: navy + bright copper on ivory */ .q-brand{width:236px;min-width:236px} .q-marks{width:82px;height:25px;margin-bottom:8px} .q-marks line{ stroke:rgba(11,39,64,.76)!important; stroke-width:1.55!important; opacity:.95!important; } .q-marks line.mid{ stroke:var(--copper)!important; stroke-width:2.2!important; opacity:1!important; filter:drop-shadow(0 0 1px rgba(215,128,70,.18)); } .q-word{ color:var(--navy)!important; font-size:1.82rem!important; font-weight:700!important; letter-spacing:.16em!important; gap:.05em!important; text-shadow:none!important; } .q-rest{color:var(--navy)!important} .q-descriptor{ color:var(--copper)!important; font-size:.54rem!important; font-weight:700!important; letter-spacing:.34em!important; text-shadow:none!important; } .q-word .q-button{ width:1.08em!important; height:1.08em!important; flex-basis:1.08em!important; border:2px solid var(--navy)!important; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.58),rgba(255,255,255,0) 44%),transparent!important; box-shadow:none!important; } .q-word .q-button::after{ width:.45em!important; height:2.2px!important; right:-.18em!important; bottom:.09em!important; background:linear-gradient(90deg,var(--copper-deep),var(--copper-bright) 60%,var(--copper))!important; box-shadow:0 0 6px rgba(215,128,70,.18)!important; } .q-word .q-button::before{display:none!important} /* Keep first page in a navy mood, but reveal the photography more clearly */ .hero{background-color:var(--navy-deep)!important;background-blend-mode:normal!important} .hero .overlay{ background: linear-gradient(90deg,rgba(8,33,54,.40) 0%,rgba(12,45,72,.16) 52%,rgba(8,33,54,.10) 100%), linear-gradient(to top,rgba(8,33,54,.62) 0%,rgba(9,38,62,.18) 56%,rgba(9,38,62,.24) 100%)!important; } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,44,66,.06),rgba(17,44,66,.00) 34%,rgba(17,44,66,.08) 100%); pointer-events:none; } .hero-content{position:relative;z-index:1} .hero .eyebrow{color:var(--copper-bright)!important;text-shadow:0 0 10px rgba(242,175,128,.10)} .hero h1,.hero .lead,.hero p,.micro-grid{position:relative;z-index:1} /* Make ivory/copper read more clearly across the page */ body{background:var(--ivory)!important;color:var(--navy)!important} .section{background:var(--ivory)!important} .alt{background:var(--ivory-soft)!important} .service-card,.deliverables-grid article,.dimension-grid article,.ethics-grid article{background:var(--ivory-card)!important} .contact{background:#EEE5D8!important} .btn.primary{background:var(--ivory)!important;color:var(--navy)!important;border-color:rgba(247,243,234,.95)!important} .btn.ghost{border-color:var(--copper)!important} .problem blockquote,.callout{border-left-color:var(--copper)!important} @media(max-width:1000px){.q-brand{width:214px;min-width:214px}} @media(max-width:650px){ .q-brand{width:188px;min-width:188px} .q-word{font-size:1.62rem!important;letter-spacing:.14em!important} .q-descriptor{font-size:.48rem!important;letter-spacing:.28em!important} } /* ---- v7: selected logo direction 01 — ivory / navy / copper ---- */ :root{ --brand-ivory:#FAF7F1; --brand-navy:#0B273F; --brand-copper:#D77B42; --brand-copper-bright:#E58D50; } /* Ivory header, logo locked to top-left. */ .site-header{ background:rgba(250,247,241,.97)!important; border-bottom:1px solid rgba(11,39,63,.10)!important; box-shadow:0 8px 24px rgba(11,39,63,.07)!important; } .site-header .desktop-nav a, .site-header .lang-toggle, .site-header .menu-toggle{color:var(--brand-navy)!important} .site-header .nav-cta{ color:var(--brand-navy)!important; border-color:var(--brand-copper)!important; } .site-header .nav-cta:hover{ background:var(--brand-copper)!important; color:var(--brand-ivory)!important; } /* Exact lockup direction: WORDMARK / BAR SYMBOL / DESCRIPTOR. */ .q-brand{ width:260px!important; min-width:260px!important; align-items:center!important; justify-content:center!important; color:var(--brand-navy)!important; } .q-word{ order:1; font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif!important; font-size:1.78rem!important; font-weight:700!important; letter-spacing:.22em!important; gap:.055em!important; color:var(--brand-navy)!important; text-shadow:none!important; line-height:1!important; } .q-rest{color:var(--brand-navy)!important} /* Q remains the circular button; its tail is always copper. */ .q-word .q-button{ width:1.02em!important; height:1.02em!important; flex-basis:1.02em!important; border:2.35px solid var(--brand-navy)!important; background:transparent!important; box-shadow:none!important; margin-right:.06em!important; } .q-word .q-button::after{ content:""!important; display:block!important; width:.43em!important; height:2.4px!important; right:-.17em!important; bottom:.055em!important; background:var(--brand-copper)!important; border-radius:2px!important; transform:rotate(43deg)!important; transform-origin:left center!important; box-shadow:none!important; } .q-word .q-button::before{display:none!important} /* Five-bar symbol remains unchanged in form, now placed under the wordmark. */ .q-marks{ order:2; width:74px!important; height:20px!important; margin:8px 0 5px!important; } .q-marks line{ stroke:var(--brand-navy)!important; stroke-width:1.45!important; opacity:.70!important; } .q-marks line.mid{ stroke:var(--brand-copper)!important; stroke-width:2.05!important; opacity:1!important; filter:none!important; } .q-descriptor{ order:3; margin-top:0!important; font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif!important; font-size:.49rem!important; font-weight:700!important; letter-spacing:.36em!important; padding-left:.36em!important; color:var(--brand-copper)!important; text-shadow:none!important; white-space:nowrap!important; } @media(max-width:1000px){ .desktop-nav.open{background:rgba(250,247,241,.99)!important;border-bottom-color:rgba(11,39,63,.10)!important} .q-brand{width:232px!important;min-width:232px!important;transform:scale(.94)!important;transform-origin:left center!important} } @media(max-width:650px){ .q-brand{width:200px!important;min-width:200px!important;transform:scale(.83)!important;transform-origin:left center!important} } /* ---- v6.1: matched footer lockup + stronger Q + brand-toned portrait ---- */ /* Make the Q ring visually as substantial as the heavier wordmark. */ .q-word .q-button{ border-width:3.05px!important; } .q-word .q-button::after{ height:2.8px!important; background:linear-gradient(90deg,var(--brand-copper),var(--copper-bright, #F2AF80))!important; } /* Footer repeats the exact QALIBRE lockup language used in the header. */ .footer-brand{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1; margin-bottom:14px; } .footer-q-word{ display:inline-flex; align-items:center; gap:.055em; font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.78rem; font-weight:700; letter-spacing:.22em; color:var(--brand-ivory); white-space:nowrap; } .footer-q-rest{color:var(--brand-ivory)} .footer-q-button{ position:relative; display:inline-block; width:1.02em; height:1.02em; flex:0 0 1.02em; border:3.05px solid var(--brand-ivory); border-radius:50%; margin-right:.06em; } .footer-q-button::after{ content:""; position:absolute; width:.43em; height:2.8px; right:-.17em; bottom:.055em; background:linear-gradient(90deg,var(--brand-copper),var(--copper-bright, #F2AF80)); border-radius:2px; transform:rotate(43deg); transform-origin:left center; } .footer-q-marks{ width:74px; height:20px; margin:8px 0 5px 66px; overflow:visible; } .footer-q-marks line{ stroke:var(--brand-ivory); stroke-width:1.45; opacity:.70; } .footer-q-marks line.mid{ stroke:var(--brand-copper); stroke-width:2.05; opacity:1; } .footer-q-descriptor{ font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.49rem; font-weight:700; letter-spacing:.36em; padding-left:.36em; color:var(--brand-copper-bright, #E58D50); white-space:nowrap; } /* Hide the legacy footer logo styles if they survive elsewhere. */ .foot-word,.foot-descriptor{display:none!important} /* Bring the portrait into the same navy / ivory / copper family without changing the image itself. */ .bio-image{ position:relative; background:var(--brand-navy)!important; overflow:hidden; } .bio-image img{ display:block; width:100%; opacity:.97!important; filter:saturate(.66) contrast(1.04) brightness(.98) sepia(.10)!important; } .bio-image::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(135deg,rgba(11,39,63,.24),rgba(11,39,63,.05) 48%,rgba(215,123,66,.13)), linear-gradient(to top,rgba(11,39,63,.15),transparent 45%); mix-blend-mode:color; } @media(max-width:650px){ .footer-q-word{font-size:1.58rem;letter-spacing:.18em} .footer-q-marks{margin-left:56px} .footer-q-descriptor{font-size:.45rem;letter-spacing:.30em} } /* ================================================================== v8 — QALIBRE brand layer. Single source of truth for colour. Navy / copper / ivory, brightened and contrast-checked. Nothing here changes copy, structure or layout. ================================================================== */ :root{ /* navy */ --q-navy:#0A2137; --q-navy-deep:#061729; --q-navy-mid:#17415F; /* ivory */ --q-ivory:#FBF8F2; --q-ivory-soft:#F1E9DB; --q-ivory-card:#FFFDF8; /* copper — three steps, each with a job */ --q-copper:#D2762F; /* rules, symbols, large type, UI */ --q-copper-bright:#F0A365; /* anything sitting on navy */ --q-copper-deep:#A34F1C; /* small type on ivory (AA compliant)*/ /* text */ --q-text:#0A2137; --q-text-muted:#48586B; --q-line:rgba(10,33,55,.16); --q-line-strong:rgba(10,33,55,.30); } /* keep every older token in step with the new palette */ :root{ --ink:var(--q-navy);--paper:var(--q-ivory);--paper-2:var(--q-ivory-soft); --line:var(--q-line);--gold:var(--q-copper);--gold-soft:var(--q-copper-bright); --gold-deep:var(--q-copper-deep);--white:var(--q-ivory-card);--muted:var(--q-text-muted); --navy:var(--q-navy);--navy-deep:var(--q-navy-deep);--navy-mid:var(--q-navy-mid); --ivory:var(--q-ivory);--ivory-soft:var(--q-ivory-soft);--ivory-card:var(--q-ivory-card); --copper:var(--q-copper);--copper-light:var(--q-copper-bright); --copper-bright:var(--q-copper-bright);--copper-deep:var(--q-copper-deep); --brand-ivory:var(--q-ivory);--brand-navy:var(--q-navy); --brand-copper:var(--q-copper);--brand-copper-bright:var(--q-copper-bright); } /* ---- surfaces: more separation between bands, so the page reads brighter ---- */ body,.section{background:var(--q-ivory)!important;color:var(--q-text)!important} .alt{background:var(--q-ivory-soft)!important} .service-card,.deliverables-grid article,.dimension-grid article, .ethics-grid article{background:var(--q-ivory-card)!important;border-color:var(--q-line)!important} .contact{background:#EFE5D4!important} .extension-card,.callout{background:rgba(255,253,248,.72)!important} /* ---- copper carries structure, not just the logo ---- */ .eyebrow,.kicker,.subheading{color:var(--q-copper-deep)!important} .hero .eyebrow{color:var(--q-copper-bright)!important;text-shadow:0 1px 10px rgba(6,23,41,.45)} .deliverables-grid article>span,.steps article>span, .principles span,.flow-line span{color:var(--q-copper-deep)!important} .deliverables-grid article>span,.steps article>span{font-size:.86rem!important;font-weight:600} .steps article{border-top:2px solid var(--q-copper)!important} .problem blockquote{border-left:3px solid var(--q-copper)!important} .callout{border-left:4px solid var(--q-copper)!important} .callout.soft{border-left-color:var(--q-navy-mid)!important} .journey span+span::before,.flow-line span+span::before{color:var(--q-copper)!important} .comparison-table thead th{ border-bottom:2px solid var(--q-copper)!important; color:var(--q-navy)!important; } .comparison-table th,.comparison-table td{border-bottom-color:var(--q-line)!important} .comparison-table tbody tr:nth-child(odd) td{background:rgba(241,233,219,.42)} .text-link{border-bottom:1px solid var(--q-copper)!important;color:var(--q-copper-deep)!important} .text-link:hover{color:var(--q-navy)!important} details,summary{border-color:var(--q-line)!important} .mini-form button{background:var(--q-copper)!important;color:var(--q-ivory)!important;font-weight:600} .mini-form button:hover{background:var(--q-copper-deep)!important} /* ---- navy panels: deeper, so copper and ivory glow against them ---- */ .low-cta,.senior-limit,.scale div,footer,.toast{background:var(--q-navy-deep)!important;color:var(--q-ivory)!important} .low-cta a,.senior-limit a,footer a{color:var(--q-ivory)!important} .scale strong{color:var(--q-copper-bright)!important} .footer-right,.footer-right a{color:#AEBCCB!important} .footer-right a:hover{color:var(--q-copper-bright)!important} .btn.dark{background:var(--q-navy)!important;color:var(--q-ivory)!important} .btn.dark:hover{background:var(--q-copper)!important} .btn.primary{background:var(--q-ivory)!important;color:var(--q-navy)!important;border-color:var(--q-ivory)!important} .btn.primary:hover{background:var(--q-copper)!important;color:var(--q-ivory)!important;border-color:var(--q-copper)!important} .btn.ghost{border-color:var(--q-copper-bright)!important;color:var(--q-ivory)!important} .btn.ghost:hover{background:var(--q-copper)!important;border-color:var(--q-copper)!important} .skip-link{background:var(--q-navy)!important;color:var(--q-ivory)!important} /* ---- photography: lift it, keep the text legible ---- */ .hero .overlay{ background: linear-gradient(90deg,rgba(6,23,41,.52) 0%,rgba(6,23,41,.20) 54%,rgba(6,23,41,.08) 100%), linear-gradient(to top,rgba(6,23,41,.72) 0%,rgba(6,23,41,.14) 58%,rgba(6,23,41,.20) 100%)!important; } .sector-card{background:var(--q-navy-deep)!important} .sector-card img{opacity:.74!important;filter:saturate(.92) contrast(1.03)} .sector-card>div{background:linear-gradient(to top,rgba(6,23,41,.92) 0%,rgba(6,23,41,.62) 42%,transparent 100%)!important} .sector-card span{color:var(--q-copper-bright)!important;font-weight:600} .sector-card h3,.sector-card p{color:var(--q-ivory)!important} .micro-grid{border-top-color:rgba(251,248,242,.42)!important} .micro-grid span{color:var(--q-copper-bright)!important} .image-pending{background:repeating-linear-gradient(45deg,#F1E9DB,#F1E9DB 12px,#E8DECB 12px,#E8DECB 24px)!important} .image-pending span{color:#8A7358!important} /* ---- forms ---- */ .contact-form input,.contact-form select,.contact-form textarea{ border:1px solid var(--q-line-strong)!important; background:rgba(255,253,248,.88)!important; color:var(--q-navy)!important; } .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ border-color:var(--q-copper)!important; } .privacy-note{color:#4E5C6C!important} a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,summary:focus-visible{ outline:2px solid var(--q-copper)!important;outline-offset:3px!important; } /* ---- header ---- */ .site-header{ background:rgba(251,248,242,.97)!important; border-bottom:1px solid var(--q-line)!important; box-shadow:0 8px 24px rgba(10,33,55,.06)!important; } .site-header .desktop-nav a,.site-header .lang-toggle, .site-header .menu-toggle{color:var(--q-navy)!important} .site-header .desktop-nav a:hover{color:var(--q-copper-deep)!important} .site-header .nav-cta{border-color:var(--q-copper)!important;color:var(--q-navy)!important} .site-header .nav-cta:hover{background:var(--q-copper)!important;color:var(--q-ivory)!important} /* ================================================================== LOGO — refinements. Form unchanged: wordmark, five bars, descriptor. ================================================================== */ .q-brand,.footer-brand{--q-ring:2.6px} /* the Q tail was fixed in px, so it broke at every scaled size. em units keep it proportional from 16px to 200px. */ .q-word .q-button::after,.footer-q-button::after{ height:.085em!important; width:.46em!important; right:-.19em!important; bottom:.05em!important; border-radius:.05em!important; background:var(--q-copper)!important; } .footer-q-button::after{background:var(--q-copper-bright)!important} .q-word .q-button{border-width:.085em!important;border-color:var(--q-navy)!important} .footer-q-button{border-width:.085em;border-color:var(--q-ivory)} /* wordmark and descriptor share one optical width */ .q-word{color:var(--q-navy)!important;letter-spacing:.215em!important} .q-descriptor{ color:var(--q-copper-deep)!important; font-size:.52rem!important; letter-spacing:.335em!important; opacity:1!important; } .q-marks{margin:9px 0 6px!important} .q-marks line{stroke:var(--q-navy)!important;opacity:.55!important} .q-marks line.mid{stroke:var(--q-copper)!important;opacity:1!important;stroke-width:2.2!important} /* the middle mark answers on hover — the one moving part of the brand */ .q-marks line.mid,.footer-q-marks line.mid{transition:transform .32s cubic-bezier(.2,.8,.2,1)} .q-brand:hover .q-marks line.mid{transform:translateY(-2.5px)} .q-brand:hover .q-word .q-button::after{background:var(--q-copper-deep)!important} /* footer lockup: centre the bars properly instead of the 66px nudge */ .footer-brand{align-items:center!important} .footer-q-marks{margin:9px auto 6px!important} .footer-q-word{color:var(--q-ivory)} .footer-q-marks line{stroke:var(--q-ivory)} .footer-q-marks line.mid{stroke:var(--q-copper-bright)} .footer-q-descriptor{color:var(--q-copper-bright);font-size:.52rem;letter-spacing:.335em} /* portrait: lighter grade, the old one muddied the photograph */ .bio-image img{filter:saturate(.84) contrast(1.02) brightness(1.02)!important;opacity:1!important} .bio-image::after{ background:linear-gradient(140deg,rgba(10,33,55,.12),rgba(210,118,47,.09) 70%)!important; mix-blend-mode:color!important; } @media(prefers-reduced-motion:reduce){ .q-marks line.mid,.footer-q-marks line.mid{transition:none} } @media(max-width:650px){ .q-descriptor{font-size:.47rem!important;letter-spacing:.27em!important} .footer-q-descriptor{font-size:.45rem;letter-spacing:.27em} } /* ================================================================== v9 — Q-A lockup, copper metalizat. Fara modificari de continut. ================================================================== */ :root{ --q-metal:linear-gradient(172deg,#7E3D1B 0%,#B8622F 16%,#E9A273 34%,#F7CDAA 44%, #EDB085 52%,#C4713D 64%,#A5552A 80%,#D08650 100%); } /* coronita: cele cinci repere, toate copper metalizat */ .q-marks line,.footer-q-marks line{stroke:url(#qcu)!important;opacity:1!important} .q-marks line.mid,.footer-q-marks line.mid{stroke:url(#qcu)!important;stroke-width:2.2!important} .q-brand:hover .q-marks line.mid{transform:translateY(-2.5px)} /* inelul lui Q: gradient metalizat, cu disc interior in culoarea suprafetei */ .q-word .q-button,.footer-q-button{ position:relative;border-color:transparent!important; background:var(--q-metal)!important; } .q-word .q-button::before,.footer-q-button::before{ content:""!important;display:block!important;position:absolute!important; inset:.105em!important;border-radius:50%!important;border:0!important; background:var(--q-surface,#FBF8F2)!important; } .site-header{--q-surface:#FBF8F2} footer,.footer-brand{--q-surface:#061729} .q-brand:hover .q-word .q-button::before{background:var(--q-surface,#FBF8F2)!important} /* liniuta lui Q, aceeasi nuanta */ .q-word .q-button::after,.footer-q-button::after{background:var(--q-metal)!important} /* litera A */ .q-a{ background:var(--q-metal); -webkit-background-clip:text;background-clip:text; color:transparent!important;-webkit-text-fill-color:transparent; } .q-rest,.footer-q-rest{color:var(--q-navy)!important} /* descriptorul urmeaza culoarea denumirii, ca in varianta aleasa */ .q-descriptor{color:var(--q-navy)!important} footer .footer-q-descriptor{color:var(--q-ivory)!important} footer .footer-q-rest{color:var(--q-ivory)!important} /* ================================================================== v10 — coronita deasupra denumirii; spatiu pentru al doilea profil ================================================================== */ .q-brand{display:flex!important;flex-direction:column!important;align-items:center!important} .q-marks{order:1!important;margin:0 0 .34em!important} .q-word{order:2!important} .q-descriptor{order:3!important;margin-top:.4em!important} .footer-brand{display:flex!important;flex-direction:column!important;align-items:center!important} .footer-q-marks{order:1!important;margin:0 0 .34em!important;margin-left:0!important} .footer-q-word{order:2!important;margin-bottom:0!important} .footer-q-descriptor{order:3!important;margin-top:.4em!important} /* al doilea profil: spatiu pentru fotografie, pana la primirea ei */ .bio-image.image-pending{ display:flex;align-items:center;justify-content:center; min-height:380px;border:1px solid var(--q-line); } .bio-image.image-pending span{ font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#8A7358; } .bio-grid+.bio-grid{margin-top:clamp(40px,6vw,72px)} /* ================================================================== v11 — cele doua profiluri pe acelasi rand ================================================================== */ .team-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,64px); padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--q-line); } .team-grid article{display:grid;grid-template-columns:168px minmax(0,1fr);gap:clamp(18px,2vw,26px);align-items:start} .team-grid .bio-image{aspect-ratio:4/5;overflow:hidden;margin-bottom:0!important;min-height:0!important} .team-grid .eyebrow{margin-top:2px} .team-grid h3{font-size:1.24rem} @media(max-width:1080px){.team-grid article{grid-template-columns:140px minmax(0,1fr)}} @media(max-width:760px){.team-grid article{grid-template-columns:120px minmax(0,1fr)}} .team-grid .bio-image img{width:100%;height:100%;object-fit:cover;display:block} .team-grid h3{margin:.2em 0 .35em} .team-grid p{margin:0;color:var(--q-text-muted)} @media(max-width:900px){.team-grid{grid-template-columns:1fr;gap:32px}} /* ================================================================== v12 — al doilea profil, oglindit, la aceeasi scara ================================================================== */ .bio-grid.mirrored{grid-template-columns:1.22fr .78fr;margin-top:clamp(40px,6vw,72px); padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--q-line)} .bio-grid.mirrored .bio-image{min-height:420px} @media(max-width:860px){.bio-grid.mirrored .bio-image{min-height:300px}} /* ================================================================== v13 — "Cine suntem": doua portrete pe acelasi rand, doua biografii ================================================================== */ .people{margin-top:clamp(44px,6vw,76px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--q-line)} .people-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:26px} .people-row figure{margin:0} .people-row .portrait{max-width:440px;margin:0 auto;aspect-ratio:4/5;overflow:hidden;border-radius:2px} .people-row .portrait img{width:100%;height:100%;object-fit:cover;display:block} .people-row figcaption{max-width:440px;margin:18px auto 0;text-align:center} .people-row figcaption strong{ display:block;font-family:var(--font-display);font-weight:500; font-size:1.34rem;line-height:1.2;color:var(--q-navy); } .people-row figcaption span{ display:block;margin-top:7px;font-size:.78rem;letter-spacing:.11em; text-transform:uppercase;color:var(--q-copper-deep); } .people-bios{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px);margin-top:clamp(34px,4vw,54px); } .people-bios article{padding-top:22px;border-top:1px solid var(--q-line)} .people-bios h3{margin:0 0 14px;font-size:1.16rem} .people-bios p{font-size:.96rem} @media(max-width:860px){ .people-row,.people-bios{grid-template-columns:1fr} .people-row .portrait{max-width:340px} .people-bios{gap:34px} } /* ================================================================== 3. Site additions (STOICA, 2026-09-29). Nothing above this line was changed; everything below is new. ================================================================== */ /* The language switch is now a link to the other page. It keeps the look of the old