/*
Theme Name: Milni Coming Soon
Theme URI: https://example.com/
Author: Milni
Description: A calm, responsive coming-soon page for a counselling and mental-health practice.
Version: 1.0.0
Text Domain: milni-coming-soon
*/
:root { --ink:#28252d; --muted:#68636b; --cream:#f8f2ea; --lavender:#74628d; --plum:#8b4b73; --line:rgba(70,54,75,.16); }
* { box-sizing:border-box; }
body.milni-coming-soon { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; }
.landing-page { min-height:100svh; display:flex; flex-direction:column; overflow:hidden; position:relative; isolation:isolate; padding:28px clamp(24px,5.4vw,88px) 20px; }
.aura { position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); opacity:.52; }
.aura--one { width:48vw; height:48vw; right:-20vw; top:-23vw; background:#ead9ce; }
.aura--two { width:34vw; height:34vw; left:-17vw; bottom:-12vw; background:#e4ddeb; }
.hero { width:min(1210px,100%); margin:auto; display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr); align-items:center; column-gap:clamp(35px,8vw,140px); }
.brand { grid-column:1 / -1; height:82px; display:flex; align-items:flex-start; }
.brand__logo img { max-width:144px; max-height:74px; width:auto; height:auto; object-fit:contain; }
.brand__fallback-logo { width:121px; mix-blend-mode:multiply; }
.hero__content { padding:30px 0 52px; }
.eyebrow { color:var(--plum); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; margin:0 0 17px; }
h1 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(58px,7.7vw,112px); line-height:.88; font-weight:500; letter-spacing:-.055em; margin:0 0 39px; }
h1 em { color:var(--plum); font-weight:500; }
blockquote { font-family:"Playfair Display",Georgia,serif; font-size:clamp(21px,2vw,28px); line-height:1.38; font-weight:500; letter-spacing:-.018em; max-width:570px; margin:0; }
.divider { width:75px; display:flex; align-items:center; gap:8px; margin:33px 0 21px; }
.divider::before,.divider::after,.divider span { content:""; display:block; height:1px; background:var(--plum); }
.divider::before,.divider::after { width:29px; opacity:.55; } .divider span { width:7px; height:7px; transform:rotate(45deg); }
.supporting-copy { color:var(--muted); font-size:14px; max-width:350px; line-height:1.6; margin:0; }
.portrait-wrap { margin:0; justify-self:end; width:min(100%,405px); position:relative; padding:0 24px 26px 0; }
.portrait-wrap::after { content:""; position:absolute; right:0; bottom:0; width:70%; height:72%; border:1px solid rgba(139,75,115,.43); z-index:-1; }
.portrait-frame { height:min(61vh,600px); min-height:415px; overflow:hidden; background:#d0c5c2; border-radius:210px 210px 4px 4px; }
.portrait-frame img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 20%; }
footer { color:var(--muted); text-align:center; font-size:11px; letter-spacing:.04em; padding-top:18px; } footer span { color:var(--plum); padding:0 7px; }
@media (max-width:760px) { .landing-page { padding:22px 24px 16px; } .hero { display:flex; flex-direction:column; align-items:stretch; margin:0 auto; } .brand { height:68px; } .brand__logo img { max-height:57px; max-width:110px; } .hero__content { padding:38px 0 36px; } h1 { font-size:65px; margin-bottom:29px; } blockquote { font-size:22px; } .portrait-wrap { align-self:center; justify-self:auto; width:min(89%,390px); padding-right:18px; padding-bottom:20px; } .portrait-frame { height:440px; min-height:0; } footer { margin-top:28px; } }
@media (max-height:750px) and (min-width:761px) { .portrait-frame { height:480px; min-height:390px; } .hero__content { padding-bottom:18px; } }