/* ============================================================ Oak Hotel Casino Resort — informational site stylesheet Theme: editorial luxury · warm ivory, deep forest, brass Fonts: Marcellus (display) + Mulish (body) ============================================================ */ :root{ --ivory:#f6f1e7; --paper:#fffdf7; --forest:#1f3a2c; --forest-deep:#16291f; --ink:#1b271f; --muted:#566057; --brass:#b08a4b; --brass-deep:#8a6a35; --line:rgba(27,39,31,.14); --line-soft:rgba(27,39,31,.08); --shadow:0 24px 60px -28px rgba(22,41,31,.45); --maxw:1140px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:"Mulish",-apple-system,sans-serif; font-weight:400; color:var(--ink); background:var(--ivory); line-height:1.72; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:.01em;color:var(--forest)} a{color:var(--brass-deep);text-decoration:none} a:hover{color:var(--forest)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .narrow{max-width:760px} /* eyebrow / label */ .eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase; color:var(--brass-deep);font-weight:600;margin-bottom:1.1rem; } /* ---------------- HERO (h1 is the first element in ) ---------------- */ /* atmosphere lives on the body so nothing needs to wrap above the h1 */ body.home::before, body.inner::before{ content:"";position:absolute;top:0;left:0;right:0;height:560px;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 85% -8%, rgba(176,138,75,.16), transparent 55%); } body.home::after{ content:"";position:absolute;top:0;left:0;right:0;height:560px;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 96px); opacity:.5; } .hero-title{ position:relative;z-index:2; max-width:var(--maxw);margin:0 auto; padding:8.2rem 28px 0; font-size:clamp(2.7rem,6.4vw,5.1rem); } .hero-stage{position:relative;z-index:1;padding:1.4rem 0 5.4rem;overflow:hidden} .hero-stage .leaf{ position:absolute;right:-60px;top:-120px;width:420px;height:420px; opacity:.10;color:var(--forest);pointer-events:none;transform:rotate(8deg);z-index:-1; } .hero-stage .rule{width:84px;height:2px;background:var(--brass);margin:0 0 1.7rem} .hero-stage .lead{ font-size:clamp(1.08rem,2vw,1.32rem); max-width:60ch;color:#39463c;line-height:1.7; } .badge18{ display:inline-flex;align-items:center;gap:.55rem;margin-top:2.4rem; border:1px solid var(--line);border-radius:999px; padding:.5rem 1.05rem;font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);background:var(--paper); } .badge18 b{color:var(--forest);font-family:"Marcellus",serif;font-size:.92rem;letter-spacing:.04em} /* ---------------- SECTIONS ---------------- */ section{padding:4.6rem 0} .section-alt{background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .section-forest{background:var(--forest);color:#e9efe7} .section-forest h2,.section-forest h3{color:#fff} .section-forest a{color:#e3c98c} h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:1.3rem} h3{font-size:1.28rem;margin-bottom:.6rem;color:var(--forest)} section p{margin-bottom:1.15rem;color:#3a463d} .section-forest p{color:#cdd8cc} .lede{font-size:1.16rem;color:#36433a} /* grid of cards */ .grid{display:grid;gap:1.6rem;margin-top:2.4rem} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--paper);border:1px solid var(--line);border-radius:14px; padding:2rem 1.8rem;box-shadow:0 1px 0 rgba(255,255,255,.6) inset; transition:transform .35s ease, box-shadow .35s ease; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .card .num{font-family:"Marcellus",serif;font-size:1.5rem;color:var(--brass);display:block;margin-bottom:.6rem} .section-forest .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)} .section-forest .card h3{color:#fff} .section-forest .card p{color:#c4d0c4} /* comparison split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2.4rem;border:1px solid var(--line);border-radius:16px;overflow:hidden} .split .col{padding:2.2rem 2rem} .split .col:first-child{border-right:1px solid var(--line);background:var(--paper)} .split .col h3{margin-bottom:.9rem} .split ul{list-style:none} .split li{padding:.42rem 0 .42rem 1.4rem;position:relative;color:#3a463d;font-size:.97rem} .split li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;background:var(--brass);border-radius:50%} /* simple prose pages — h1 is the first element in */ .page-title{ position:relative;z-index:2; max-width:var(--maxw);margin:0 auto; padding:7.2rem 28px 0; font-size:clamp(2.1rem,4.6vw,3.3rem); } .page-intro{position:relative;z-index:1;padding:1rem 0 2.4rem;border-bottom:1px solid var(--line-soft)} .page-intro p{color:var(--muted);max-width:62ch;font-size:1.08rem} .prose{padding:3.4rem 0 4.5rem} .prose h2{font-size:1.6rem;margin:2.4rem 0 .9rem} .prose h3{margin:1.8rem 0 .5rem} .prose p,.prose li{color:#3a463d} .prose ul,.prose ol{margin:0 0 1.2rem 1.3rem} .prose li{margin-bottom:.5rem} .prose .meta{font-size:.86rem;color:var(--muted);font-style:italic;margin-bottom:2rem} /* notice block */ .notice{ border-left:3px solid var(--brass);background:rgba(176,138,75,.08); padding:1.3rem 1.5rem;border-radius:0 10px 10px 0;margin:2rem 0; font-size:.97rem;color:#3a463d; } .notice strong{color:var(--forest)} /* contact details */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem} .contact-card{border:1px solid var(--line);border-radius:14px;padding:1.7rem;background:var(--paper)} .contact-card .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;margin-bottom:.4rem} .contact-card .val{font-family:"Marcellus",serif;font-size:1.16rem;color:var(--forest);word-break:break-word} /* ---------------- FOOTER ---------------- */ .site-footer{background:var(--forest-deep);color:#bcc9bd;padding:4rem 0 2rem;margin-top:0} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand .mark{font-family:"Marcellus",serif;font-size:1.5rem;color:#fff;letter-spacing:.02em} .footer-brand p{margin-top:.9rem;font-size:.92rem;max-width:38ch;color:#9fb0a1} .footer-col h4{font-family:"Marcellus",serif;font-weight:400;color:#e3c98c;font-size:1rem;margin-bottom:1rem;letter-spacing:.04em} .footer-col a{display:block;color:#bcc9bd;font-size:.92rem;padding:.28rem 0} .footer-col a:hover{color:#fff} .footer-rg{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.8rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.86rem;color:#9fb0a1} .footer-rg .pill{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.35rem .85rem;color:#e9efe7;font-size:.76rem;letter-spacing:.1em} .footer-bottom{padding-top:1.6rem;font-size:.82rem;color:#8a9c8c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem} .footer-bottom a{color:#9fb0a1} /* ---------------- animation ---------------- */ @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both} .d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}.d4{animation-delay:.4s} @media (prefers-reduced-motion:reduce){.rise{animation:none}} /* ---------------- responsive ---------------- */ @media(max-width:880px){ .grid.cols-3,.grid.cols-2,.contact-grid{grid-template-columns:1fr} .split{grid-template-columns:1fr} .split .col:first-child{border-right:none;border-bottom:1px solid var(--line)} .footer-top{grid-template-columns:1fr 1fr;gap:2rem} .footer-brand{grid-column:1/-1} .hero-title{padding-top:6rem} .hero-stage{padding-bottom:3.6rem} .hero-stage .leaf{width:280px;right:-80px;opacity:.07} .page-title{padding-top:5.4rem} } @media(max-width:520px){ .footer-top{grid-template-columns:1fr} body{font-size:16px} }