/** Shopify CDN: Minification failed Line 68:91 Expected identifier but found "16px" Line 584:12 Expected identifier but found whitespace Line 584:13 Unexpected "clamp(" **/ /* KOSMA TEX B2B redesign — deep ink, warm white, industrial editorial */ .section-kosma-home { margin: 0 !important; } .kosma-home { --kt-ink:#202B29; --kt-blue:#173B35; --kt-blue2:#2E5B52; --kt-paper:#F6F4EE; --kt-white:#fff; --kt-muted:#202B29; --kt-line:#E5E2D8; --kt-accent:#2E5B52; color:var(--kt-ink); background:var(--kt-white); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing:-.015em; } .kosma-home * { box-sizing:border-box; } .kosma-home h1,.kosma-home h2,.kosma-home h3,.kosma-home p { margin-top:0; } .kosma-home h1,.kosma-home h2,.kosma-home h3 { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:-.045em; font-weight:650; } .kosma-topline { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:11px max(5vw,24px); background:var(--kt-ink); color:#e9edf0; font-size:10px; letter-spacing:.13em; text-transform:uppercase; } .kosma-topline a { color:#fff; text-decoration:none; border-bottom:1px solid #8A938C; padding-bottom:3px; } .kosma-hero { display:grid; grid-template-columns:minmax(360px,.84fr) minmax(0,1.16fr); min-height:570px; background:var(--kt-paper); } .kosma-hero-copy { padding: 40px 5%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .kosma-eyebrow { font-size:12px; letter-spacing:.18em; font-weight:700; text-transform:uppercase; color:#2E5B52; } .kosma-hero h1 { font-size:clamp(42px,5.3vw,76px); line-height:.99; margin-bottom:24px; max-width:650px; } .kosma-home h1 em,.kosma-home h2 em { color:var(--kt-blue2); font-style:normal; } .kosma-lede { font-size:16px; line-height:1.75; color:#202B29; max-width:490px; margin-bottom:30px; } .kosma-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; } .kosma-btn { min-height:51px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:18px; font-size:10px; letter-spacing:.1em; font-weight:700; text-decoration:none; transition:background .2s,color .2s; } .kosma-btn-dark { background:var(--kt-blue); color:#fff; border:1px solid var(--kt-blue); } .kosma-btn-dark:hover { background:var(--kt-ink); color:#fff; } .kosma-btn-light { background:transparent; border:1px solid rgba(255,255,255,.65); color:#fff; } .kosma-btn-outline { border:1px solid var(--kt-ink); color:var(--kt-ink); background:transparent; } .kosma-btn-outline:hover { background:var(--kt-ink); color:#fff; } .kosma-btn-cream { background:var(--kt-paper); color:var(--kt-ink); white-space:nowrap; } .kosma-text-link { color:var(--kt-ink); font-size:10px; letter-spacing:.1em; font-weight:700; text-decoration:none; border-bottom:1px solid #A8B3AD; padding:0 0 6px; } .kosma-proof { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:38px; padding-top:19px; border-top:1px solid var(--kt-line); width:100%; color:#202B29; font-size:10px; } .kosma-proof span:before { content:"✓"; color:var(--kt-blue2); font-weight:bold; margin-right:7px; } .kosma-hero-art { position:relative; min-height:570px; overflow:hidden; background:var(--kt-blue); } .kosma-hero-art img { width:100%; height:100%; min-height:570px; object-fit:cover; display:block; } .kosma-hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,25,37,.05),transparent 40%,rgba(11,25,37,.12)); pointer-events:none; } .kosma-hero-caption { position:absolute; bottom:28px; right:28px; z-index:1; color:white; background:rgba(17,28,39,.82); padding:22px 26px; border-radius:4px; max-width:300px; backdrop-filter:blur(10px); box-shadow:0 8px 32px rgba(0,0,0,.25); } .kosma-hero-caption span { display:block; font-size:9px; letter-spacing:.16em; margin-bottom:8px; color:#d5c4a5; } .kosma-hero-caption strong { font-size:19px; line-height:1.2; } .kosma-b2b-strip { display:grid; grid-template-columns:repeat(4,1fr); padding:27px 7%; border-bottom:1px solid var(--kt-line); gap:20px; } .kosma-b2b-strip>div { display:flex; gap:14px; align-items:center; border-right:1px solid var(--kt-line); padding-right:12px; } .kosma-b2b-strip>div:last-of-type { border-right:0; } .kosma-b2b-strip b { font-size:12px; color:var(--kt-blue2); } .kosma-b2b-strip strong,.kosma-b2b-strip small { display:block; } .kosma-b2b-strip strong { font-size:13px; margin-bottom:5px; } .kosma-b2b-strip small { color:var(--kt-muted); font-size:11px; } .kosma-services { display:grid; grid-template-columns:1.12fr repeat(4,1fr); gap:20px; padding:95px 7%; } .kosma-services-intro { padding-right:18px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .kosma-home h2 { font-size:clamp(31px,3.2vw,47px); line-height:1.06; margin-bottom:18px; } .kosma-services-intro>p:not(.kosma-eyebrow),.kosma-gallery-heading>p:not(.kosma-eyebrow) { color:var(--kt-muted); font-size:13px; line-height:1.75; margin-bottom:25px; } .kosma-service-card { text-decoration:none; color:var(--kt-ink); display:block; min-width:0; } .kosma-service-card img { width:100%; aspect-ratio:1.08/1; object-fit:cover; display:block; margin-bottom:20px; filter:saturate(.86); transition:filter .2s, transform .2s; } .kosma-service-card:hover img { filter:saturate(1.1); } .kosma-service-card>span { font-size:9px; letter-spacing:.12em; color:var(--kt-blue2); } .kosma-service-card h3 { font-size:17px; margin:9px 0 8px; letter-spacing:-.03em; } .kosma-service-card p { font-size:12px; line-height:1.65; color:var(--kt-muted); } .kosma-workflow { display:grid; grid-template-columns:1fr 1fr; gap:6%; padding:80px 8%; background:#173B35; color:#fff; }.kosma-workflow h2{color:#fff}.kosma-workflow-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start}.kosma-workflow-photos img{width:100%;height:240px;object-fit:cover;display:block;border-radius:6px}.kosma-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:8px;padding-top:44px;border-top:1px solid rgba(255,255,255,.18)}.kosma-steps>div{padding:0;border-bottom:0}@media (max-width:768px){.kosma-workflow-photos{grid-template-columns:1fr 1fr}.kosma-workflow-photos img{height:160px}.kosma-steps{grid-template-columns:1fr 1fr;gap:24px;margin-top:0;padding-top:32px}} .kosma-workflow .kosma-eyebrow { color:#2E5B52; } .kosma-workflow h2 { font-size:clamp(34px,4vw,53px); } .kosma-workflow-copy>p:not(.kosma-eyebrow) { max-width:390px; line-height:1.8; color:#D6D9D4; font-size:13px; margin-bottom:28px; } .kosma-steps>div { display:grid; grid-template-columns:42px 1fr; gap:17px; padding:19px 0; border-bottom:1px solid #3A4A44; } .kosma-steps>div:first-child { padding-top:0; } .kosma-steps>div>span { width:31px; height:31px; border:1px solid #A8B3AD; display:grid; place-items:center; font-size:10px; color:#2E5B52; border-radius:50%; } .kosma-steps h3 { font-size:16px; margin-bottom:6px; letter-spacing:-.02em; color:#fff; }e:16px; margin-bottom:6px; letter-spacing:-.02em; } .kosma-steps p { color:#C9CFC9; font-size:12px; line-height:1.65; margin-bottom:0; } .kosma-gallery { padding:86px 7% 94px; background:var(--kt-paper); } .kosma-gallery-heading { max-width:620px; margin-bottom:30px; } .kosma-gallery-heading h2 { margin-bottom:12px; } .kosma-gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .kosma-gallery-grid a { color:var(--kt-ink); text-decoration:none; background:#fff; } .kosma-gallery-grid img { display:block; width:100%; aspect-ratio:1.2/1; object-fit:cover; } .kosma-gallery-grid span { display:block; padding:14px 16px; font-size:11px; font-weight:700; letter-spacing:.03em; } .kosma-final { padding:68px 8%; display:flex; align-items:center; justify-content:space-between; gap:35px; background:var(--kt-blue); color:#fff; } .kosma-final .kosma-eyebrow { color:#2E5B52; margin-bottom:14px !important; } .kosma-final h2 { margin-bottom:14px; font-size:clamp(32px,4vw,52px); } .kosma-final h2 em { color:#e2d6c3; } /* Owner request 2026-10-09: increase custom homepage section fonts ~25% */ body .kosma-topline{font-size:13px!important} body .kosma-hero h1{font-size:clamp(52px,6.6vw,95px)!important} body .kosma-lede{font-size:20px!important} body .kosma-btn{font-size:13px!important} body .kosma-text-link{font-size:13px!important} body .kosma-proof{font-size:13px!important} body .kosma-hero-caption span{font-size:11px!important} body .kosma-hero-caption strong{font-size:24px!important} body .kosma-b2b-strip b{font-size:15px!important} body .kosma-b2b-strip strong{font-size:16px!important} body .kosma-b2b-strip small{font-size:14px!important} body .kosma-home h2{font-size:clamp(39px,4vw,59px)!important} body .kosma-services-intro>p:not(.kosma-eyebrow),body .kosma-gallery-heading>p:not(.kosma-eyebrow){font-size:16px!important} body .kosma-service-card>span{font-size:11px!important} body .kosma-service-card h3{font-size:21px!important} body .kosma-service-card p{font-size:15px!important} body .kosma-workflow h2{font-size:clamp(42px,5vw,66px)!important} body .kosma-workflow-copy>p:not(.kosma-eyebrow){font-size:16px!important} body .kosma-steps>div>span{font-size:13px!important} body .kosma-steps h3{font-size:20px!important} body .kosma-steps p{font-size:15px!important} body .kosma-gallery-grid span{font-size:14px!important} body .kosma-final h2{font-size:clamp(40px,5vw,65px)!important} body .kosma-final p:not(.kosma-eyebrow){font-size:16px!important} @media (max-width:749px){ body .kosma-topline{font-size:10px!important} body .kosma-hero h1{font-size:clamp(50px,13.75vw,72px)!important} body .kosma-lede{font-size:18px!important} body .kosma-hero-caption strong{font-size:20px!important} body .kosma-home h2{font-size:42px!important} body .kosma-service-card h3{font-size:19px!important} } @media(max-width:1100px) { .kosma-hero { grid-template-columns:1fr 1fr; } .kosma-hero-copy { padding: 40px 5%; } .kosma-services { grid-template-columns:repeat(4,1fr); padding:65px 5%; } .kosma-services-intro { grid-column:1/-1; max-width:650px; margin-bottom:12px; } } @media(max-width:749px) { .kosma-topline { padding:10px 18px; font-size:8px; flex-wrap:wrap; gap:7px 12px; } .kosma-topline span:nth-child(2) { display:none; } .kosma-hero { display:flex; flex-direction:column; } .kosma-hero-copy { padding: 40px 5%; } .kosma-hero h1 { font-size:clamp(40px,11vw,58px); } .kosma-lede { font-size:14px; } .kosma-proof { margin-top:26px; gap:10px 14px; } .kosma-hero-art,.kosma-hero-art img { min-height:310px; height:310px; } .kosma-hero-caption { bottom:15px; right:15px; left:15px; padding:16px 18px; max-width:none; } .kosma-hero-caption strong { font-size:16px; } .kosma-b2b-strip { grid-template-columns:1fr 1fr; padding:24px 22px; gap:22px 12px; } .kosma-b2b-strip>div { border-right:0; } .kosma-b2b-strip small { line-height:1.4; } .kosma-services { grid-template-columns:1fr 1fr; padding:58px 22px; gap:28px 14px; } .kosma-services-intro { grid-column:1/-1; } .kosma-home h2 { font-size:34px; } .kosma-service-card img { aspect-ratio:1/1; margin-bottom:13px; } .kosma-service-card h3 { font-size:15px; } .kosma-workflow { grid-template-columns:1fr; gap:36px; padding:56px 24px; } .kosma-gallery { padding:55px 22px; } .kosma-gallery-grid { grid-template-columns:1fr 1fr; gap:12px; } .kosma-gallery-grid span { padding:11px 12px; } .kosma-final { display:block; padding:52px 24px; } .kosma-final .kosma-btn { margin-top:25px; white-space:normal; } } /* Business feature strip: replace numbered markers with the four line icons from the approved reference. */ .kosma-b2b-strip { grid-template-columns:repeat(4,minmax(0,1fr)); padding:22px max(4.5vw,28px); gap:0; align-items:center; } .kosma-b2b-strip>div { min-width:0; gap:14px; align-items:center; border-right:1px solid var(--kt-line); padding:4px clamp(14px,2vw,30px); } .kosma-b2b-strip>div:first-child { padding-left:0; } .kosma-b2b-strip>div:last-child { border-right:0; padding-right:0; } .kosma-b2b-strip .kosma-feature-icon { display:block; flex:0 0 41px; width:41px; height:41px; fill:none; stroke:var(--kt-blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .kosma-b2b-strip strong { font-size:12px; line-height:1.35; margin-bottom:4px; color:var(--kt-ink); } .kosma-b2b-strip small { font-size:10px; line-height:1.45; } @media(max-width:749px) { .kosma-b2b-strip { grid-template-columns:1fr 1fr; padding:22px; gap:18px 12px; } .kosma-b2b-strip>div,.kosma-b2b-strip>div:first-child,.kosma-b2b-strip>div:last-child { border-right:0; padding:0; gap:10px; align-items:flex-start; } .kosma-b2b-strip .kosma-feature-icon { flex-basis:34px; width:34px; height:34px; } .kosma-b2b-strip strong { font-size:11px; } .kosma-b2b-strip small { font-size:9px; } } @media(max-width:768px){} @media(max-width:768px){} @media(max-width:768px){} @media(max-width:768px){} .kosma-process{background:#ffffff;padding:60px 20px 70px} .kosma-process .kp-inner{max-width:1200px;margin:0 auto;text-align:center} .kosma-process .kp-eyebrow{font-size:11px;font-weight:600;letter-spacing:3px;color:#202B29;margin:0 0 16px;text-transform:uppercase} .kosma-process .kp-title{font-size:34px;font-weight:800;color:#173B35;margin:0 0 12px;letter-spacing:-0.5px} .kosma-process .kp-sub{font-size:14px;color:#202B29;margin:0 0 50px} .kosma-process .kp-steps{display:flex;align-items:flex-start;justify-content:center} .kosma-process .kp-step{width:200px;text-align:center} .kosma-process .kp-top{display:flex;align-items:center;justify-content:center;margin-bottom:20px} .kosma-process .kp-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#173B35;color:#fff;font-size:13px;font-weight:700;margin-right:14px} .kosma-process .kp-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#E7ECEA;color:#173B35} .kosma-process .kp-ic svg{width:34px;height:34px} .kosma-process .kp-step h3{font-size:15px;font-weight:700;color:#173B35;margin:0 0 10px} .kosma-process .kp-step p{font-size:13px;color:#202B29;line-height:1.65;margin:0} .kosma-process .kp-arrow{display:flex;align-items:center;justify-content:center;width:40px;color:#9AA5A0;margin-top:28px} .kosma-process .kp-arrow svg{width:22px;height:22px} @media(max-width:768px){.kosma-process .kp-steps{flex-direction:column;align-items:center}.kosma-process .kp-arrow{transform:rotate(90deg);margin:10px 0}} /* Reduced hero size per owner request */ .kosma-hero{padding:48px 5% !important;min-height:auto !important} .kosma-hero h1{font-size:2.6rem !important;line-height:1.15 !important} .kosma-hero .kosma-lede{font-size:1.05rem !important;margin:16px 0 24px !important} .kosma-hero .kosma-eyebrow{font-size:0.75rem !important;margin-bottom:12px !important} @media(max-width:768px){ .kosma-hero{padding:36px 5% !important} .kosma-hero h1{font-size:1.9rem !important} } /* Fix feature grid alignment */ .kosma-features, .kp-features, [class*="features"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; align-items: start !important; } .kosma-features > *, .kp-features > *, [class*="features"] > * { display: flex !important; flex-direction: column !important; margin: 0 !important; } @media(max-width:768px){ .kosma-features, .kp-features, [class*="features"] { grid-template-columns: 1fr !important; } } /* Fix b2b strip item alignment - ensure consistent top alignment */ .kosma-b2b-strip>div { align-items: flex-start !important; } .kosma-b2b-strip>div>div, .kosma-b2b-strip>div>span { display: block; } .kosma-b2b-strip .kosma-feature-icon { margin-top: 2px; flex-shrink: 0; } /* Normalize mobile menu capitalization */ .menu-drawer__menu-item, .menu-drawer__menu li a { text-transform: capitalize !important; } /* Proper b2b-strip item alignment fix */ .kosma-b2b-strip>div { display: flex !important; align-items: flex-start !important; gap: 12px !important; } .kosma-b2b-strip>div .kosma-feature-icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; margin-top: 2px !important; } .kosma-b2b-strip>div>b { flex: 0 0 28px !important; min-width: 28px !important; padding-top: 2px !important; } .kosma-b2b-strip>div>span { flex: 1 1 auto !important; min-width: 0 !important; } .kosma-b2b-strip>div>span>strong, .kosma-b2b-strip>div>span>small { display: block !important; } /* Pattern/category cards: 2 per row on mobile */ @media (max-width: 768px) { .kosma-cat-grid, .kosma-pattern-grid, .kosma-cards, [class*="cat-grid"], [class*="pattern-grid"] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* Generic: any card list that was 1 column on mobile */ .kosma-home-cards { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 768px) { .kosma-process .kp-title { font-size: 1.4rem !important; } .kosma-process .kp-step { padding: 10px 0 !important; } } @media (max-width: 768px) { .kosma-process .kp-steps { display: flex !important; flex-direction: row !important; overflow-x: auto !important; gap: 12px !important; } .kosma-process .kp-step { min-width: 140px !important; flex-shrink: 0 !important; text-align: center !important; } } @media (max-width: 768px) { .kosma-process .kp-step { min-width: 110px !important; padding: 6px !important; } .kosma-process .kp-step .kp-num { width: 28px !important; height: 28px !important; font-size: 0.7rem !important; } .kosma-process .kp-step .kp-icon { width: 40px !important; height: 40px !important; } .kosma-process .kp-step h3 { font-size: 0.75rem !important; } .kosma-process .kp-step p { font-size: 0.65rem !important; } } /* Textile Design Showroom (homepage) */ .kosma-showroom { background:#fff; padding:72px 7% 80px; } .ks-inner { max-width:1180px; margin:0 auto; display:grid; gap:38px; } .ks-copy h2 { font-size:clamp(30px,4.4vw,52px); line-height:1.08; margin-bottom:18px; letter-spacing:-.01em; } .ks-lede { font-size:15px; line-height:1.75; color:#202B29; max-width:480px; margin-bottom:26px; } .ks-points { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:16px; } .ks-points li { display:grid; gap:4px; padding-left:22px; position:relative; } .ks-points li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--kt-blue2); } .ks-points strong { font-size:14px; color:var(--kt-ink); } .ks-points span { font-size:13px; line-height:1.65; color:#202B29; } .ks-call { margin-top:18px; font-size:13px; color:#202B29; } .ks-call a { color:var(--kt-blue); font-weight:700; text-decoration:none; } .ks-photos { display:grid; gap:12px; } .ks-photos img { display:block; width:100%; object-fit:cover; border-radius:10px; } .ks-main { aspect-ratio:3/2; } .ks-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ks-row img { aspect-ratio:4/3; } @media (min-width:900px) { .ks-inner { grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; } .kosma-showroom { padding:96px 7% 104px; } } .ks-call a { color: inherit !important; text-decoration: none !important; font-weight: inherit !important; } /* HOW IT WORKS - elegant serif like OUR COLLECTIONS reference */ .kosma-workflow .kosma-workflow-copy h2, .kosma-workflow h2 { font-family: 'Cormorant Garamond', 'Times New Roman', serif !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } /* HOW IT WORKS - link button like reference */ .kosma-workflow-link-btn { display: inline-flex; align-items: center; gap: 8px; background: white; color: #1a1a1a; padding: 10px 24px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 500; margin-top: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .kosma-workflow-link-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } /* HOW IT WORKS - photo layout matching reference */ .kosma-workflow-photos { width: 100%; } .kosma-workflow-main-img { width: 100%; height: auto; display: block; border-radius: 4px; } .kosma-workflow-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; } .kosma-workflow-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; } @media (max-width: 600px) { .kosma-workflow-thumbs { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; } } /* HOW IT WORKS - force vertical stack layout */ .kosma-workflow-photos { display: block !important; width: 100% !important; } .kosma-workflow-photos .kosma-workflow-main-img { display: block !important; width: 100% !important; height: auto !important; margin-bottom: 16px !important; } .kosma-workflow-photos .kosma-workflow-thumbs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; width: 100% !important; } .kosma-workflow-photos .kosma-workflow-thumbs img { display: block !important; width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; border-radius: 10px !important; } /* Thumbnails: square, 4 in a row */ .kosma-workflow-photos .kosma-workflow-thumbs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 1fr !important; gap: 12px !important; } .kosma-workflow-photos .kosma-workflow-thumbs img { aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Button arrow styling like reference */ .kosma-btn-arrow { display: inline-block; margin-left: 12px; font-size: 1.1em; font-weight: 400; line-height: 1; vertical-align: baseline; transform: translateY(-1px); } .kosma-btn { display: inline-flex; align-items: center; justify-content: center; } /* Both hero buttons exactly the same size */ .kosma-actions .kosma-btn { box-sizing: border-box !important; height: 51px !important; min-height: 51px !important; max-height: 51px !important; display: inline-flex !important; align-items: center !important; } /* ============ WHY KOSMA TEX (2026-10-10) ============ */ .kosma-why { background: #fffdf8; padding: 80px 8%; } .kosma-why .kw-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.5fr; gap: 48px; align-items: start; } .kw-grid { min-width: 0; } .kw-card { min-width: 0; } .kosma-why .kw-intro { max-width: 640px; margin-bottom: 48px; } .kosma-why .kw-intro h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em; } .kosma-why .kw-sub { color: #5a5347; font-size: 16px; line-height: 1.65; margin: 0; } .kosma-why .kw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .kosma-why .kw-card { padding: 8px 20px 8px 0; border-left: 1px solid #e8e2d5; padding-left: 20px; } .kosma-why .kw-card:first-child { border-left: none; padding-left: 0; } .kosma-why .kw-icon { display: inline-flex; width: 44px; height: 44px; margin-bottom: 18px; color: #173B35; } .kosma-why .kw-icon svg { width: 100%; height: 100%; } .kosma-why .kw-card h3 { font-size: 18px; margin: 0 0 10px; font-weight: 600; } .kosma-why .kw-card p { color: #5a5347; font-size: 14px; line-height: 1.6; margin: 0; } @media (max-width: 800px) { .kosma-why { padding: 56px 24px; } .kosma-why .kw-inner { grid-template-columns: 1fr; gap: 32px; } .kosma-why .kw-grid { grid-template-columns: 1fr; gap: 32px; } .kosma-why .kw-card { border-left: none; padding-left: 0; border-top: 1px solid #e8e2d5; padding-top: 28px; } .kosma-why .kw-card:first-child { border-top: none; padding-top: 0; } } /* ============ FINAL NAVY CTA (2026-10-10) ============ */ .kosma-final-navy { background: #173B35; text-align: left; } .kosma-final-navy .kosma-eyebrow { color: #2E5B52; letter-spacing: 0.18em; } .kosma-final-navy h2 { color: #fff; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; margin-bottom: 16px; } .kosma-final-navy p:not(.kosma-eyebrow) { color: rgba(255,255,255,0.82); } .kosma-btn-light { background: #fff; color: #173B35; border: 1px solid #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; } .kosma-btn-light:hover { background: transparent; color: #fff; } /* PROCESS — supporting media figure */ .kp-media { margin: 0 auto 48px; max-width: 1000px; } .kp-media img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 12px; } .kp-media figcaption { margin-top: 10px; font-size: 12px; color: #8A8F88; letter-spacing: 0.02em; } @media (max-width: 700px) { .kp-media img { aspect-ratio: 16 / 10; } .kp-media { margin-bottom: 36px; } } /* Premium serif (owner 2026-10-10): all homepage headings match reference elegance */ .kosma-home h1, .kosma-home h2, .kosma-home h3 { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } /* Fresh review 2026-10-10: announcement bar teal -> navy (overrides inline style) */ .announcement-bar, .announcement-bar.gradient, div.announcement-bar[style] { background: #173B35 !important; background-color: #173B35 !important; } /* Bolder serif headings (owner request 2026-10-10) */ h1, h2, h3, .kosma-workflow h2, .section-heading, .kosma-section-title { font-weight: 600 !important; } /* Showroom photo brand treatment (owner request 2026-10-10) */ /* Warm up the harsh fluorescent look to match premium brand */ .kosma-showroom img, .kosma-showroom-teaser img, img[src*="kosma-showroom-main"] { filter: sepia(0.15) saturate(1.1) brightness(1.05) contrast(0.95); } /* Subtle warm overlay for premium feel */ .kosma-showroom, .kosma-showroom-teaser { position: relative; } .kosma-showroom::after, .kosma-showroom-teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(253,251,247,0.08), rgba(30,58,92,0.06)); pointer-events: none; border-radius: inherit; } /* ===== HARMONY LAYER (2026-10-10) : unified type scale + section rhythm ===== */ .kosma-home h2, .kosma-workflow h2, .kosma-final h2, .ks-copy h2, .kosma-why .kw-intro h2, .kosma-final-navy h2, font-size: clamp(32px, 4vw, 54px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; } .kosma-services, .kosma-workflow, .kosma-why, .kosma-showroom, .kosma-gallery, .kosma-final { padding-top: 88px !important; padding-bottom: 88px !important; } @media (max-width: 700px) { .kosma-services, .kosma-workflow, .kosma-why, .kosma-showroom, .kosma-gallery, .kosma-final { padding-top: 56px !important; padding-bottom: 56px !important; } } /* ============================================================ HARMONY 2026-10-10: cross-section consistency Every content section shares one rhythm, one type scale, one spacing system — so the page feels like ONE site. ============================================================ */ /* 1. Unified section rhythm: same vertical + horizontal padding */ .kosma-why, .kosma-services, .kosma-process, .kosma-gallery, .kosma-showroom { padding: 80px 7% !important; } /* 2. Unified section headlines: one serif, one scale */ .kosma-why h2, .kosma-services h2, .kosma-process h2, .kosma-gallery h2, .kosma-showroom h2, .kosma-workflow h2, .kosma-final h2 { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important; font-weight: 600 !important; font-size: clamp(32px, 4vw, 54px) !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; } /* 3. Unified card titles */ .kosma-why .kw-card h3, .kosma-service-card h3, .kosma-process .kp-step h3, .kosma-steps h3 { font-size: 19px !important; font-weight: 600 !important; line-height: 1.3 !important; } /* 4. Unified eyebrows */ .kosma-home .kosma-eyebrow { font-size: 12px !important; letter-spacing: 0.18em !important; font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 18px !important; } /* 5. Unified section image treatment */ .kosma-gallery-grid img, .kosma-showroom img, .kosma-process .kp-media img, .kosma-workflow-photos img { border-radius: 10px !important; } /* 6. Mobile: proportional scale-down, same system */ @media (max-width: 768px) { .kosma-why, .kosma-services, .kosma-process, .kosma-gallery, .kosma-showroom { padding: 56px 5% !important; } .kosma-why h2, .kosma-services h2, .kosma-process h2, .kosma-gallery h2, .kosma-showroom h2, .kosma-workflow h2, .kosma-final h2 { font-size: 30px !important; } } /* Font size harmony - proportional scale (owner request 2026-10-10) */ /* Ensure all section content follows harmonious size ratios */ .kosma-section h2 { font-size: clamp(32px, 4vw, 54px) !important; line-height: 1.15 !important; } .kosma-section h3 { font-size: clamp(24px, 3vw, 36px) !important; line-height: 1.2 !important; } .kosma-section p { font-size: clamp(16px, 1.5vw, 18px) !important; line-height: 1.7 !important; } .kosma-section .kosma-eyebrow { font-size: 12px !important; letter-spacing: 0.15em !important; } /* Fix: navy buttons must have white text (contrast fix 2026-10-10) */ .kosma-btn-dark, a[style*="173B35"], a[style*="173b35"], [style*="background:#173B35"], [style*="background: #173B35"], [style*="background-color:#173B35"], [style*="background-color: #173B35"] { color: #ffffff !important; } .kosma-btn-dark *, [style*="173B35"] * { color: #ffffff !important; } /* Footer harmony patch 2026-10-10 */ /* 1. Remove the jarring white gap between the CTA section and the footer. (Theme sets .footer { margin-top: 36px/48px } — that margin is the white strip.) */ .footer { margin-top: 0 !important; } /* 2. Footer uses the SAME navy as the CTA (#173B35), not the teal accent scheme. The footer carries classes "color-accent-1 gradient" which resolve to #173B35 teal. This override (higher specificity + !important) unifies the two sections. */ .footer.color-accent-1 { --gradient-background: #173B35 !important; background: #173B35 !important; } /* 3. CTA headline clipping fix. a) Roomier line-height so Cormorant Garamond ascenders (f, Y, P, etc.) are never clipped at large sizes. b) scroll-margin-top keeps the headline clear of the sticky header when the section is scrolled to the top of the viewport. */ .kosma-final-navy h2 { line-height: 1.22 !important; } .kosma-final { scroll-margin-top: 100px; } /* 4. Footer headings ("Get the newsletter", "Quick Links", …) → Cormorant serif, matching the theme's heading system (600 weight per owner directive). */ #footer .footer-block__heading { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important; font-weight: 600 !important; color: #ffffff !important; } /* 5. Newsletter email field → navy-consistent. Overrides the teal theme-editor custom CSS: #footer .newsletter-form__field-wrapper .field__input { background:#173B35; border:1px solid #173B35; } (Same selector + !important wins over the inline