/* ========================================================= ADITYA ENTERPRISES — DESIGN SYSTEM Clean, minimal, professional. Light/Dark theme via [data-theme] on . All values driven by tokens. ========================================================= */ /* ===== TOKENS — LIGHT (default) ===== */ :root, :root[data-theme="light"]{ --bg: #ffffff; --bg-alt: #f7f7f8; --surface: #ffffff; --surface-2: #f4f4f6; --surface-hover: #eef0f3; --text: #16181d; --text-muted: #5b6070; --text-subtle: #8a8f9c; --border: #e6e7eb; --border-strong: #d6d8de; --accent: #4c53d6; --accent-hover: #3d43c2; --accent-soft: rgba(76,83,214,0.08); --accent-text: #ffffff; --success-soft: rgba(23,138,84,0.10); --success: #16794f; --gold-soft: rgba(180,132,20,0.12); --gold: #8a6110; --shadow-sm: 0 1px 2px rgba(16,18,27,0.04), 0 1px 1px rgba(16,18,27,0.03); --shadow-md: 0 4px 14px rgba(16,18,27,0.06), 0 1px 2px rgba(16,18,27,0.04); --shadow-lg: 0 12px 32px rgba(16,18,27,0.10), 0 2px 6px rgba(16,18,27,0.05); --nav-bg: rgba(255,255,255,0.82); --overlay-scrim: linear-gradient(to top, rgba(15,16,20,0.72), transparent); color-scheme: light; } /* ===== TOKENS — DARK ===== */ :root[data-theme="dark"]{ --bg: #121214; --bg-alt: #18181b; --surface: #1b1c1f; --surface-2: #202126; --surface-hover: #26272d; --text: #edeef1; --text-muted: #a3a6b0; --text-subtle: #75798a; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --accent: #7b82ec; --accent-hover: #8f95f0; --accent-soft: rgba(123,130,236,0.16); --accent-text: #12131a; --success-soft: rgba(52,199,140,0.14); --success: #4ade9a; --gold-soft: rgba(224,175,60,0.14); --gold: #e0af3c; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 6px 18px rgba(0,0,0,0.34); --shadow-lg: 0 16px 40px rgba(0,0,0,0.44); --nav-bg: rgba(18,18,20,0.82); --overlay-scrim: linear-gradient(to top, rgba(0,0,0,0.78), transparent); color-scheme: dark; } /* ===== SHARED TOKENS (radius / motion / type scale) ===== */ :root{ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --ease: cubic-bezier(0.16,1,0.3,1); --speed-fast: 0.15s; --speed: 0.22s; --speed-theme: 0.35s; --container: 1120px; --container-narrow: 720px; } /* ===== RESET ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{height:100%;} body{ background:var(--bg); color:var(--text); font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; font-size:16px;/* ========================================================= ADITYA ENTERPRISES — DESIGN SYSTEM Clean, minimal, professional. Light/Dark theme via [data-theme] on . All values driven by tokens. ========================================================= */ /* ===== TOKENS — LIGHT (default) ===== */ :root, :root[data-theme="light"]{ --bg: #ffffff; --bg-alt: #f7f7f8; --surface: #ffffff; --surface-2: #f4f4f6; --surface-hover: #eef0f3; --text: #16181d; --text-muted: #5b6070; --text-subtle: #8a8f9c; --border: #e6e7eb; --border-strong: #d6d8de; --accent: #4c53d6; --accent-hover: #3d43c2; --accent-soft: rgba(76,83,214,0.08); --accent-text: #ffffff; --success-soft: rgba(23,138,84,0.10); --success: #16794f; --gold-soft: rgba(180,132,20,0.12); --gold: #8a6110; --shadow-sm: 0 1px 2px rgba(16,18,27,0.04), 0 1px 1px rgba(16,18,27,0.03); --shadow-md: 0 4px 14px rgba(16,18,27,0.06), 0 1px 2px rgba(16,18,27,0.04); --shadow-lg: 0 12px 32px rgba(16,18,27,0.10), 0 2px 6px rgba(16,18,27,0.05); --nav-bg: rgba(255,255,255,0.82); --overlay-scrim: linear-gradient(to top, rgba(15,16,20,0.72), transparent); color-scheme: light; } /* ===== TOKENS — DARK ===== */ :root[data-theme="dark"]{ --bg: #121214; --bg-alt: #18181b; --surface: #1b1c1f; --surface-2: #202126; --surface-hover: #26272d; --text: #edeef1; --text-muted: #a3a6b0; --text-subtle: #75798a; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --accent: #7b82ec; --accent-hover: #8f95f0; --accent-soft: rgba(123,130,236,0.16); --accent-text: #12131a; --success-soft: rgba(52,199,140,0.14); --success: #4ade9a; --gold-soft: rgba(224,175,60,0.14); --gold: #e0af3c; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 6px 18px rgba(0,0,0,0.34); --shadow-lg: 0 16px 40px rgba(0,0,0,0.44); --nav-bg: rgba(18,18,20,0.82); --overlay-scrim: linear-gradient(to top, rgba(0,0,0,0.78), transparent); color-scheme: dark; } /* ===== SHARED TOKENS (radius / motion / type scale) ===== */ :root{ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --ease: cubic-bezier(0.16,1,0.3,1); --speed-fast: 0.15s; --speed: 0.22s; --speed-theme: 0.35s; --container: 1120px; --container-narrow: 720px; } /* ===== RESET ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{height:100%;} body{ background:var(--bg); color:var(--text); font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Smooth theme switch across every surface */ body, .navbar,.mobile-menu,.section,.about-card,.bento-card,.facility-img, .award-item,.award-medal,.customer-card,.contact-row a,.btn, .stat,.fact,.check-list li,.footer,.nav-links a,.eyebrow,.catalogue-item{ transition:background-color var(--speed-theme) ease, border-color var(--speed-theme) ease, color var(--speed-theme) ease, box-shadow var(--speed-theme) ease; } a{color:inherit;text-decoration:none;} ul{list-style:none;} img{max-width:100%;display:block;} button{font-family:inherit;} /* subtle, fixed page texture — replaces old noise/blob layers */ .grid-layer{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.4; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%); } .noise-layer,.blob{display:none;} /* ===== LAYOUT HELPERS ===== */ .section{position:relative;z-index:1;padding:88px 24px;border-top:1px solid var(--border);} .section-alt{background:var(--bg-alt);} .section-inner{max-width:var(--container);margin:0 auto;} .center{text-align:center;margin-left:auto;margin-right:auto;} .sub-max{max-width:560px;} .label-tag{ font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:12px;font-weight:600;letter-spacing:0.12em;color:var(--accent); margin-bottom:14px;text-transform:uppercase; } .section-title{ font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-0.02em;line-height:1.2; margin-bottom:18px;color:var(--text); } .body-text{color:var(--text-muted);font-size:16px;line-height:1.75;margin-bottom:16px;} .gradient-accent{color:var(--accent);} /* ===== NAVBAR ===== */ .navbar{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background-color var(--speed) var(--ease),border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease); border-bottom:1px solid transparent; background:transparent; } .navbar.scrolled{ background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm); } .nav-inner{ max-width:1240px;margin:0 auto;padding:16px 24px; display:flex;align-items:center;justify-content:space-between;gap:20px; } .nav-logo{font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--text);} .nav-logo span{color:var(--text-muted);font-weight:400;margin-left:4px;} .nav-links{display:flex;align-items:center;gap:28px;margin-right:auto;margin-left:40px;} .nav-links a{font-size:14px;font-weight:500;color:var(--text-muted);transition:color var(--speed-fast) ease;} .nav-links a:hover{color:var(--text);} .nav-right{display:flex;align-items:center;gap:14px;} .nav-cta{padding:9px 18px;font-size:13px;} /* Theme toggle */ .theme-toggle{ position:relative;width:38px;height:38px;border-radius:var(--radius-pill); display:flex;align-items:center;justify-content:center;cursor:pointer; background:var(--surface-2);border:1px solid var(--border); color:var(--text-muted); transition:background-color var(--speed) ease,border-color var(--speed) ease,color var(--speed) ease,transform var(--speed-fast) ease; flex-shrink:0; } .theme-toggle:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong);} .theme-toggle:active{transform:scale(0.92);} .theme-toggle svg{width:18px;height:18px;} .theme-toggle .icon-sun{display:none;} .theme-toggle .icon-moon{display:block;} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none;} .menu-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;} .menu-toggle span{width:20px;height:2px;background:var(--text);transition:all var(--speed-fast) ease;} .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .menu-toggle.open span:nth-child(2){opacity:0;} .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-menu{ display:none;flex-direction:column;gap:2px;padding:0 24px; max-height:0;overflow:hidden;opacity:0; background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:max-height var(--speed) var(--ease),opacity var(--speed-fast) ease,padding var(--speed) ease,border-color var(--speed) ease; } .mobile-menu.open{max-height:520px;opacity:1;padding:12px 24px 24px;border-color:var(--border);} .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text);} .mobile-menu .btn{margin-top:16px;text-align:center;} .mobile-theme-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text);} /* ===== BUTTONS ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:600; border:1px solid transparent; transition:background-color var(--speed-fast) ease,border-color var(--speed-fast) ease,transform var(--speed-fast) ease,box-shadow var(--speed-fast) ease; cursor:pointer; } .btn-primary{background:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn-primary:active{transform:translateY(0);} .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);} .btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);transform:translateY(-1px);} .btn-secondary:active{transform:translateY(0);} /* ===== HERO ===== */ .hero{ position:relative;z-index:1;min-height:88vh;display:flex;align-items:center; padding:150px 24px 80px; } .hero-inner{max-width:var(--container-narrow);margin:0 auto;text-align:center;} .eyebrow{ font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;font-weight:600;letter-spacing:0.12em;color:var(--text-muted); margin-bottom:22px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-pill); display:inline-block;background:var(--surface-2); } .hero-title{ font-size:clamp(34px,5.6vw,60px);font-weight:700;letter-spacing:-0.03em;line-height:1.1; margin-bottom:22px;color:var(--text); } .hero-sub{ font-size:18px;color:var(--text-muted);max-width:600px;margin:0 auto 34px;line-height:1.7; } .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .hero-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px; padding-top:32px;border-top:1px solid var(--border); } .stat{display:flex;flex-direction:column;gap:4px;} .stat-num{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--text);} .stat-label{font-size:12px;color:var(--text-muted);letter-spacing:0.02em;} /* ===== ABOUT ===== */ .about-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start;} .about-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:28px;} .fact{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--border);} .fact-k{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-subtle);} .fact-v{font-size:15px;color:var(--text);font-weight:500;} .about-card{ position:relative;overflow:hidden; background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px; box-shadow:var(--shadow-sm); } .about-card h3{font-size:17px;font-weight:700;margin-bottom:16px;letter-spacing:-0.01em;color:var(--text);} .card-glow{display:none;} .check-list li{ position:relative;padding:11px 0 11px 26px;font-size:14px;color:var(--text-muted); border-top:1px solid var(--border); } .check-list li:first-child{border-top:none;} .check-list li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700;} /* ===== BENTO GRID (SERVICES) ===== */ .bento-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px; grid-auto-rows:190px; } .bento-card{ position:relative;overflow:hidden;grid-column:span 4; background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px; box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease,background-color var(--speed-theme) ease; display:flex;flex-direction:column;justify-content:flex-end; } @media(min-width:900px){ .bento-grid{grid-template-columns:repeat(4,1fr);} .bento-grid .bento-card:nth-child(1){grid-column:span 2;} .bento-grid .bento-card:nth-child(2){grid-column:span 1;} .bento-grid .bento-card:nth-child(3){grid-column:span 1;} .bento-grid .bento-card:nth-child(4){grid-column:span 2;} .bento-grid .bento-card:nth-child(5){grid-column:span 4;} } .bento-card:hover{ transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md); } .bento-card .spotlight{display:none;} .card-icon{font-size:24px;margin-bottom:14px;} .bento-card h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;color:var(--text);} .bento-card p{font-size:14px;color:var(--text-muted);line-height:1.6;} /* ===== CATALOGUE ===== */ .catalogue-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px; } .catalogue-item{ padding:22px 18px;text-align:center;border-radius:var(--radius-md); background:var(--surface);border:1px solid var(--border); font-size:14px;font-weight:600;color:var(--text); box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease; } .catalogue-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md);} /* ===== FACILITY / AWARD PHOTOS ===== */ .facility-grid,.award-photos{ display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px; } .facility-img{ position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border); box-shadow:var(--shadow-sm); aspect-ratio:4/3; } .facility-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);} .facility-img:hover img{transform:scale(1.03);} .img-overlay{ position:absolute;left:0;right:0;bottom:0;padding:16px 18px; background:var(--overlay-scrim); font-size:13px;font-weight:500;color:#f2f2f3;letter-spacing:0.01em; } /* ===== ACHIEVEMENTS ===== */ .award-list{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px; } .award-item{ display:flex;align-items:center;gap:16px;padding:20px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease; box-shadow:var(--shadow-sm); } .award-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md);} .award-medal{ width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center; font-size:20px;border:1px solid var(--border);flex-shrink:0; } .award-medal.gold{background:var(--gold-soft);} .award-medal.silver{background:var(--surface-2);} .award-item h4{font-size:15px;font-weight:700;margin-bottom:2px;color:var(--text);} .award-item span{font-size:13px;color:var(--text-muted);} /* ===== CUSTOMERS ===== */ .customer-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px; } .customer-card{ padding:24px 20px;border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease; } .customer-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md);} .customer-card h3{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;color:var(--text);line-height:1.35;} .customer-card p{font-size:13px;color:var(--text-muted);line-height:1.6;} /* ===== CONTACT ===== */ .contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start;} .contact-details{margin-top:26px;display:flex;flex-direction:column;gap:16px;} .contact-row{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--text-muted);} .contact-icon{font-size:16px;flex-shrink:0;line-height:1.5;} .contact-row a{color:var(--text);font-weight:500;transition:color var(--speed-fast) ease;} .contact-row a:hover{color:var(--accent);} /* ===== FOOTER ===== */ .footer{ position:relative;z-index:1;background:var(--bg-alt); border-top:1px solid var(--border);padding:28px 24px; } .footer-inner{ max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; font-size:13px;color:var(--text-muted); } /* ===== FOCUS STATES (accessibility) ===== */ a:focus-visible,button:focus-visible,.btn:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm); } /* ===== SCROLL REVEAL ===== */ .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease);} .reveal.in-view{opacity:1;transform:translateY(0);} /* ===== RESPONSIVE ===== */ @media(max-width:900px){ .nav-links{display:none;} .nav-cta{display:none;} .menu-toggle{display:flex;} .mobile-menu{display:flex;} .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px;} .hero-stats{grid-template-columns:repeat(2,1fr);} .bento-grid{grid-template-columns:1fr !important;grid-auto-rows:auto;} .bento-grid .bento-card{grid-column:span 1 !important;} .facility-grid,.award-photos{grid-template-columns:1fr;} .award-list{grid-template-columns:1fr;} .customer-grid{grid-template-columns:1fr 1fr;} .catalogue-grid{grid-template-columns:1fr 1fr;} .section{padding:60px 20px;} .hero{padding:120px 20px 56px;} .hero-title{margin-bottom:18px;} } @media(max-width:520px){ .customer-grid{grid-template-columns:1fr;} .catalogue-grid{grid-template-columns:1fr;} .hero-stats{grid-template-columns:1fr 1fr;} .about-facts{grid-template-columns:1fr 1fr;} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} } line-height:1.6; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Smooth theme switch across every surface */ body, .navbar,.mobile-menu,.section,.about-card,.bento-card,.facility-img, .award-item,.award-medal,.customer-card,.contact-row a,.btn, .stat,.fact,.check-list li,.footer,.nav-links a,.eyebrow{ transition:background-color var(--speed-theme) ease, border-color var(--speed-theme) ease, color var(--speed-theme) ease, box-shadow var(--speed-theme) ease; } a{color:inherit;text-decoration:none;} ul{list-style:none;} img{max-width:100%;display:block;} button{font-family:inherit;} /* subtle, fixed page texture — replaces old noise/blob layers */ .grid-layer{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.4; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%); } .noise-layer,.blob{display:none;} /* ===== LAYOUT HELPERS ===== */ .section{position:relative;z-index:1;padding:88px 24px;border-top:1px solid var(--border);} .section-alt{background:var(--bg-alt);} .section-inner{max-width:var(--container);margin:0 auto;} .center{text-align:center;margin-left:auto;margin-right:auto;} .sub-max{max-width:560px;} .label-tag{ font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:12px;font-weight:600;letter-spacing:0.12em;color:var(--accent); margin-bottom:14px;text-transform:uppercase; } .section-title{ font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-0.02em;line-height:1.2; margin-bottom:18px;color:var(--text); } .body-text{color:var(--text-muted);font-size:16px;line-height:1.75;margin-bottom:16px;} .gradient-accent{color:var(--accent);} /* ===== NAVBAR ===== */ .navbar{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background-color var(--speed) var(--ease),border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease); border-bottom:1px solid transparent; background:transparent; } .navbar.scrolled{ background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm); } .nav-inner{ max-width:1240px;margin:0 auto;padding:16px 24px; display:flex;align-items:center;justify-content:space-between;gap:20px; } .nav-logo{font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--text);} .nav-logo span{color:var(--text-muted);font-weight:400;margin-left:4px;} .nav-links{display:flex;align-items:center;gap:28px;margin-right:auto;margin-left:40px;} .nav-links a{font-size:14px;font-weight:500;color:var(--text-muted);transition:color var(--speed-fast) ease;} .nav-links a:hover{color:var(--text);} .nav-right{display:flex;align-items:center;gap:14px;} .nav-cta{padding:9px 18px;font-size:13px;} /* Theme toggle */ .theme-toggle{ position:relative;width:38px;height:38px;border-radius:var(--radius-pill); display:flex;align-items:center;justify-content:center;cursor:pointer; background:var(--surface-2);border:1px solid var(--border); color:var(--text-muted); transition:background-color var(--speed) ease,border-color var(--speed) ease,color var(--speed) ease,transform var(--speed-fast) ease; flex-shrink:0; } .theme-toggle:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong);} .theme-toggle:active{transform:scale(0.92);} .theme-toggle svg{width:18px;height:18px;} .theme-toggle .icon-sun{display:none;} .theme-toggle .icon-moon{display:block;} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block;} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none;} .menu-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;} .menu-toggle span{width:20px;height:2px;background:var(--text);transition:all var(--speed-fast) ease;} .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .menu-toggle.open span:nth-child(2){opacity:0;} .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-menu{ display:none;flex-direction:column;gap:2px;padding:0 24px; max-height:0;overflow:hidden;opacity:0; background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:max-height var(--speed) var(--ease),opacity var(--speed-fast) ease,padding var(--speed) ease,border-color var(--speed) ease; } .mobile-menu.open{max-height:460px;opacity:1;padding:12px 24px 24px;border-color:var(--border);} .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text);} .mobile-menu .btn{margin-top:16px;text-align:center;} .mobile-theme-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text);} /* ===== BUTTONS ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:600; border:1px solid transparent; transition:background-color var(--speed-fast) ease,border-color var(--speed-fast) ease,transform var(--speed-fast) ease,box-shadow var(--speed-fast) ease; cursor:pointer; } .btn-primary{background:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn-primary:active{transform:translateY(0);} .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);} .btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);transform:translateY(-1px);} .btn-secondary:active{transform:translateY(0);} /* ===== HERO ===== */ .hero{ position:relative;z-index:1;min-height:88vh;display:flex;align-items:center; padding:150px 24px 80px; } .hero-inner{max-width:var(--container-narrow);margin:0 auto;text-align:center;} .eyebrow{ font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;font-weight:600;letter-spacing:0.12em;color:var(--text-muted); margin-bottom:22px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-pill); display:inline-block;background:var(--surface-2); } .hero-title{ font-size:clamp(34px,5.6vw,60px);font-weight:700;letter-spacing:-0.03em;line-height:1.1; margin-bottom:22px;color:var(--text); } .hero-sub{ font-size:18px;color:var(--text-muted);max-width:600px;margin:0 auto 34px;line-height:1.7; } .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .hero-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px; padding-top:32px;border-top:1px solid var(--border); } .stat{display:flex;flex-direction:column;gap:4px;} .stat-num{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--text);} .stat-label{font-size:12px;color:var(--text-muted);letter-spacing:0.02em;} /* ===== ABOUT ===== */ .about-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start;} .about-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:28px;} .fact{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--border);} .fact-k{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-subtle);} .fact-v{font-size:15px;color:var(--text);font-weight:500;} .about-card{ position:relative;overflow:hidden; background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px; box-shadow:var(--shadow-sm); } .about-card h3{font-size:17px;font-weight:700;margin-bottom:16px;letter-spacing:-0.01em;color:var(--text);} .card-glow{display:none;} .check-list li{ position:relative;padding:11px 0 11px 26px;font-size:14px;color:var(--text-muted); border-top:1px solid var(--border); } .check-list li:first-child{border-top:none;} .check-list li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700;} /* ===== BENTO GRID (SERVICES) ===== */ .bento-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px; grid-auto-rows:190px; } .bento-card{ position:relative;overflow:hidden;grid-column:span 4; background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px; box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease,background-color var(--speed-theme) ease; display:flex;flex-direction:column;justify-content:flex-end; } @media(min-width:900px){ .bento-grid{grid-template-columns:repeat(4,1fr);} .bento-grid .bento-card:nth-child(1){grid-column:span 2;} .bento-grid .bento-card:nth-child(2){grid-column:span 1;} .bento-grid .bento-card:nth-child(3){grid-column:span 1;} .bento-grid .bento-card:nth-child(4){grid-column:span 2;} .bento-grid .bento-card:nth-child(5){grid-column:span 4;} } .bento-card:hover{ transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md); } .bento-card .spotlight{display:none;} .card-icon{font-size:24px;margin-bottom:14px;} .bento-card h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;color:var(--text);} .bento-card p{font-size:14px;color:var(--text-muted);line-height:1.6;} /* ===== FACILITY / AWARD PHOTOS ===== */ .facility-grid,.award-photos{ display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px; } .facility-img{ position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border); box-shadow:var(--shadow-sm); aspect-ratio:4/3; } .facility-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);} .facility-img:hover img{transform:scale(1.03);} .img-overlay{ position:absolute;left:0;right:0;bottom:0;padding:16px 18px; background:var(--overlay-scrim); font-size:13px;font-weight:500;color:#f2f2f3;letter-spacing:0.01em; } /* ===== ACHIEVEMENTS ===== */ .award-list{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px; } .award-item{ display:flex;align-items:center;gap:16px;padding:20px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease; box-shadow:var(--shadow-sm); } .award-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md);} .award-medal{ width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center; font-size:20px;border:1px solid var(--border);flex-shrink:0; } .award-medal.gold{background:var(--gold-soft);} .award-medal.silver{background:var(--surface-2);} .award-item h4{font-size:15px;font-weight:700;margin-bottom:2px;color:var(--text);} .award-item span{font-size:13px;color:var(--text-muted);} /* ===== CUSTOMERS ===== */ .customer-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px; } .customer-card{ padding:24px 20px;border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease),border-color var(--speed) ease,box-shadow var(--speed) ease; } .customer-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md);} .customer-card h3{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;color:var(--text);line-height:1.35;} .customer-card p{font-size:13px;color:var(--text-muted);line-height:1.6;} /* ===== CONTACT ===== */ .contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start;} .contact-details{margin-top:26px;display:flex;flex-direction:column;gap:16px;} .contact-row{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--text-muted);} .contact-icon{font-size:16px;flex-shrink:0;line-height:1.5;} .contact-row a{color:var(--text);font-weight:500;transition:color var(--speed-fast) ease;} .contact-row a:hover{color:var(--accent);} /* ===== FOOTER ===== */ .footer{ position:relative;z-index:1;background:var(--bg-alt); border-top:1px solid var(--border);padding:28px 24px; } .footer-inner{ max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; font-size:13px;color:var(--text-muted); } /* ===== FOCUS STATES (accessibility) ===== */ a:focus-visible,button:focus-visible,.btn:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm); } /* ===== SCROLL REVEAL ===== */ .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease);} .reveal.in-view{opacity:1;transform:translateY(0);} /* ===== RESPONSIVE ===== */ @media(max-width:900px){ .nav-links{display:none;} .nav-cta{display:none;} .menu-toggle{display:flex;} .mobile-menu{display:flex;} .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px;} .hero-stats{grid-template-columns:repeat(2,1fr);} .bento-grid{grid-template-columns:1fr !important;grid-auto-rows:auto;} .bento-grid .bento-card{grid-column:span 1 !important;} .facility-grid,.award-photos{grid-template-columns:1fr;} .award-list{grid-template-columns:1fr;} .customer-grid{grid-template-columns:1fr 1fr;} .section{padding:60px 20px;} .hero{padding:120px 20px 56px;} .hero-title{margin-bottom:18px;} } @media(max-width:520px){ .customer-grid{grid-template-columns:1fr;} .hero-stats{grid-template-columns:1fr 1fr;} .about-facts{grid-template-columns:1fr 1fr;} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} }