/** * Theme Name: Sangeet Deegha * Theme URI: https://example.com/fabled-su * Description: Custom theme description... * Version: 1.0.0 * Author: Your Name * Author URI: https://example.com * Tags: block-patterns, full-site-editing * Text Domain: fabled-sunset * Domain Path: /assets/lang * Tested up to: 6.4 * Requires at least: 6.2 * Requires PHP: 7.4 * License: GNU General Public License v2.0 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================== RESET ========================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ========================== ROOT ========================== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ========================== BODY ========================== */ html, body { width: 100%; min-height: 100%; overflow-x: clip; /* Fallback to hidden if needed */ } body { font-family: Arial, Helvetica, sans-serif; background: #f5f5f5; color: #222; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================== MEDIA ========================== */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* ========================== FORMS ========================== */ input, button, textarea, select { font: inherit; } button { cursor: pointer; border: none; background: none; } /* ========================== LINKS ========================== */ a { color: inherit; text-decoration: none; } /* ========================== LISTS ========================== */ ul, ol { list-style: none; } /* ========================== TABLES ========================== */ table { border-collapse: collapse; border-spacing: 0; } /* ========================== HEADINGS ========================== */ h1, h2, h3, h4, h5, h6 { font-weight: inherit; } /* ========================== PARAGRAPHS ========================== */ p { overflow-wrap: break-word; } /* ========================== TEXT SELECTION ========================== */ ::selection { background: #1f6fff; color: #fff; } .contact-section { width: 100%; min-height: 90vh; background-image: url('./assets/contact-page2.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ========================================================== ABOUT SECTION ========================================================== */ .about-section{ position:relative; overflow:hidden; width:100%; background-image:url("./assets/about-back.png"); background-size:cover; background-position:center; background-repeat:no-repeat; padding: clamp(70px,8vw,120px) clamp(20px,8vw,120px); } /* ========================================================== CONTAINER ========================================================== */ .about-container{ width:min(1500px,100%); margin:auto; display:grid; grid-template-columns:1fr 0.9fr; align-items:center; gap:clamp(40px,6vw,100px); } /* ========================================================== CONTENT ========================================================== */ .about-content{ max-width:620px; } .about{ color:#8B5E3C; font-size:clamp(.85rem,.9vw,.95rem); letter-spacing:.2em; margin-bottom:18px; } .about-section-title{ font-family:"Cormorant Garamond",serif; font-size:clamp(2.5rem,6vw,4.6rem); color:#552505; font-weight:400; line-height:1.05; } .about-description{ margin-top:14px; color:#552505; font-size:clamp(1rem,1.1vw,1.08rem); line-height:1.9; } .about-quote{ margin-top:50px; color:#8B5E3C; font-size:clamp(1.1rem,1.7vw,1.4rem); font-style:italic; line-height:1.7; } /* ========================================================== IMAGE ========================================================== */ .about-image{ display:flex; justify-content:center; align-items:flex-end; } .about-image img{ width:100%; max-width:520px; height:auto; object-fit:contain; display:block; filter:drop-shadow(0 30px 45px rgba(0,0,0,.18)); } /* Optional Premium Frame */ .about-image{ position:relative; } .about-image::before{ content:""; position:absolute; width:82%; height:92%; border:2px solid rgba(139,94,60,.25); border-radius:14px; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } /* ========================================================== ANIMATION ========================================================== */ .reveal{ opacity:0; transform:translateY(40px); transition:.8s ease; } .reveal.active{ opacity:1; transform:none; } .delay1{transition-delay:.1s;} .delay2{transition-delay:.25s;} .delay3{transition-delay:.4s;} .delay4{transition-delay:.55s;} .delay5{transition-delay:.7s;} /* ========================================================== LAPTOP ========================================================== */ @media(max-width:1200px){ .about-container{ gap:50px; } .about-image img{ max-width:430px; } } /* ========================================================== TABLET ========================================================== */ @media(max-width:992px){ .about-container{ grid-template-columns:1fr; } .about-content{ max-width:100%; order:2; } .about-image{ order:1; } .about-image img{ max-width:380px; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ .about-section{ padding:70px 24px; } .about-content{ text-align:center; } .about-quote{ margin-inline:auto; } .about-image img{ max-width:300px; } } /* ========================================================== SMALL PHONES ========================================================== */ @media(max-width:480px){ .about-section{ padding:60px 18px; } .about-image img{ max-width:240px; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media(max-height:600px) and (orientation:landscape){ .about-container{ grid-template-columns:1fr 1fr; } .about-image img{ max-width:260px; } } /* ========================================================== HERO SECTION ========================================================== */ .hero-section{ position:relative; width:100%; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:url("./assets/project_img2.jpg") center center/cover no-repeat; padding: 140px clamp(25px,7vw,120px) 80px; } /* ========================================================== HERO CONTENT ========================================================== */ .hero-content{ width:100%; max-width:720px; display:flex; flex-direction:column; justify-content:center; z-index:2; } /* ========================================================== SWARAS ========================================================== */ .swaras{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:35px; color:#8B5E3C; font-size:1.35rem; font-family:"Times New Roman",serif; } .swaras span{ opacity:.25; transition:.25s; } .swaras span.active{ opacity:1; } /* ========================================================== HEADING ========================================================== */ .heading{ font-family:"Cormorant Garamond",serif; font-weight:400; color:#41150F; font-size:clamp(3rem,5vw,5rem); line-height:1.08; margin:0; max-width:700px; opacity:0; transform:translateY(30px); } .heading.show{ animation:fadeUp .8s forwards; } /* ========================================================== DESCRIPTION ========================================================== */ .description-group{ margin-top:40px; } .description{ color:#8B5E3C; font-size:1.15rem; line-height:1.8; max-width:560px; margin-bottom:8px; opacity:0; transform:translateY(25px); } .description.show{ animation:fadeUp .8s forwards; } /* ========================================================== BUTTONS ========================================================== */ .hero-section .buttons{ display:flex; align-items:center; gap:20px; margin-top:45px; flex-wrap:nowrap; opacity:0; transform:translateY(25px); } .hero-section .buttons.show{ animation:fadeUp .8s forwards; } /* ========================================================== PRIMARY BUTTON ========================================================== */ .hero-section .button1{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 34px; background:#41150F; color:#fff; border:none; cursor:pointer; font-size:1rem; font-weight:600; transition: transform .3s ease, background .3s ease; } .hero-section .button1:hover{ transform:translateY(-3px); background:#5B261C; } .hero-section .button1 svg{ flex-shrink:0; } /* ========================================================== SECONDARY BUTTON ========================================================== */ .hero-section .button2{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 34px; background:transparent; color:#573721; border:none; cursor:pointer; font-size:1rem; font-weight:500; transition: transform .3s ease, color .3s ease; } .hero-section .button2:hover{ transform:translateY(-3px); color:#41150F; } .hero-section .button2 svg{ flex-shrink:0; } /* ========================================================== ANIMATION ========================================================== */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .hero-content{ max-width:800px; } .heading{ font-size:5rem; } } /* ========================================================== LAPTOPS ========================================================== */ @media (max-width:1400px){ .hero-section{ padding: 140px 80px 80px; } .hero-content{ max-width:680px; } } /* ========================================================== SMALL LAPTOPS ========================================================== */ @media (max-width:1200px){ .hero-section{ padding: 130px 60px 70px; } .hero-content{ max-width:620px; } .heading{ font-size:4.2rem; } .description{ font-size:1.08rem; } } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .hero-content{ max-width:800px; } .heading{ font-size:5rem; } } /* ========================================================== LAPTOPS ========================================================== */ @media (max-width:1400px){ .hero-section{ padding: 140px 80px 80px; } .hero-content{ max-width:680px; } } /* ========================================================== SMALL LAPTOPS ========================================================== */ @media (max-width:1200px){ .hero-section{ padding: 130px 60px 70px; } .hero-content{ max-width:620px; } .heading{ font-size:4.2rem; } .description{ font-size:1.08rem; } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:992px){ .hero-section{ padding: 120px 45px 70px; } .hero-content{ max-width:560px; } .heading{ font-size:3.5rem; } .description{ max-width:100%; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .hero-section{ justify-content:center; text-align:center; padding: 110px 24px 70px; } .hero-content{ align-items:center; max-width:100%; } .swaras{ justify-content:center; margin-bottom:28px; } .heading{ font-size:2.7rem; max-width:100%; } .description-group{ margin-top:28px; } .description{ font-size:1rem; max-width:95%; } .hero-section .buttons{ width:100%; flex-direction:column; align-items:stretch; gap:16px; } .hero-section .button1, .hero-section .button2{ width:100%; justify-content:center; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .hero-section{ padding: 95px 18px 50px; } .hero-content{ width:100%; } .swaras{ gap:8px; font-size:1rem; margin-bottom:22px; } .heading{ font-size:2.3rem; line-height:1.15; } .description-group{ margin-top:22px; } .description{ font-size:.95rem; line-height:1.7; } .hero-section .buttons{ margin-top:30px; } .hero-section .button1, .hero-section .button2{ padding:15px 18px; font-size:.95rem; } } /* ========================================================== VERY SMALL DEVICES ========================================================== */ @media (max-width:360px){ .hero-section{ padding: 90px 15px 45px; } .heading{ font-size:2rem; } .description{ font-size:.92rem; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:600px) and (orientation:landscape){ .hero-section{ min-height:720px; padding: 120px 50px 60px; align-items:center; } .hero-content{ max-width:600px; } .heading{ font-size:3.2rem; } } /* ========================================================== DESKTOP MODE ON PHONES (Chrome "Desktop Site") ========================================================== */ @media (min-width:900px) and (max-width:1100px){ .hero-section{ padding: 150px 60px 80px; } .hero-content{ max-width:620px; } .heading{ font-size:3.8rem; } .description{ max-width:520px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .heading, .description, .buttons{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ========================================================== HEADER ========================================================== */ header{ position:fixed; inset:0 0 auto 0; z-index:1000; padding-top:clamp(12px,2vw,20px); } /* ========================================================== NAVBAR ========================================================== */ .navbar{ width:min(1400px,92%); margin-inline:auto; min-height:78px; display:flex; justify-content:space-between; align-items:center; padding-inline:clamp(20px,3vw,42px); border-radius:20px; background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.25); box-shadow: 0 12px 30px rgba(0,0,0,.08); transition: padding .35s ease, min-height .35s ease, background .35s ease, box-shadow .35s ease; } /* ========================================================== LOGO ========================================================== */ .logo{ opacity:0; transform:translateY(-20px); } .logo.show{ animation:fadeDown .8s forwards; } .logo a{ display:block; color:#41150F; text-decoration:none; font-weight:700; font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.05; letter-spacing:.04em; } /* ========================================================== NAV LINKS ========================================================== */ .nav-links{ display:flex; align-items:center; gap:clamp(20px,3vw,56px); list-style:none; } .nav-links li{ opacity:0; transform:translateY(-20px); } .nav-links li.show{ animation:fadeDown .7s forwards; } .nav-links a{ position:relative; color:#333; text-decoration:none; font-size:clamp(.95rem,1vw,1.05rem); font-weight:500; transition:color .3s ease; } .nav-links a:hover{ color:#573721; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#573721; transition:width .3s ease; } .nav-links a:hover::after{ width:100%; } /* ========================================================== BUTTON ========================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:#fff; background:#41150F; padding: clamp(13px,1vw,16px) clamp(22px,2vw,30px); font-size:.95rem; font-weight:600; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; opacity:0; transform:translateY(-20px); } .btn.show{ animation:fadeDown .8s forwards; } .btn:hover{ background:#6F472C; transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.15); } /* ========================================================== HAMBURGER ========================================================== */ .hamburger{ display:none; width:42px; height:42px; justify-content:center; align-items:center; flex-direction:column; gap:6px; cursor:pointer; z-index:1200; } .hamburger span{ width:28px; height:2.5px; background:#41150F; border-radius:10px; transition: transform .35s ease, opacity .35s ease; } /* ========================================================== HAMBURGER ANIMATION ========================================================== */ .hamburger.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2){ opacity:0; } .hamburger.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } /* ========================================================== ANIMATION ========================================================== */ @keyframes fadeDown{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== LARGE DESKTOP ========================================================== */ @media (min-width:1600px){ .navbar{ width:min(1500px,90%); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:1024px){ .navbar{ width:94%; } .nav-links{ gap:clamp(16px,2vw,30px); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:900px){ .btn{ display:none; } .hamburger{ display:flex; } .navbar{ min-height:72px; padding-inline:22px; } .nav-links{ position:absolute; top:calc(100% + 12px); left:0; right:0; width:100%; background:rgba(255,255,255,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:18px; display:flex; flex-direction:column; align-items:center; gap:28px; padding:35px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform: translateY(-12px) scale(.98); transition: opacity .35s ease, visibility .35s ease, transform .35s ease; } .nav-links.active{ opacity:1; visibility:visible; transform: translateY(0) scale(1); } .nav-links li{ opacity:0; transform:translateY(12px); transition: opacity .3s ease, transform .3s ease; } .nav-links.active li{ opacity:1; transform:translateY(0); } .nav-links.active li:nth-child(1){transition-delay:.05s;} .nav-links.active li:nth-child(2){transition-delay:.10s;} .nav-links.active li:nth-child(3){transition-delay:.15s;} .nav-links.active li:nth-child(4){transition-delay:.20s;} .nav-links.active li:nth-child(5){transition-delay:.25s;} .nav-links.active li:nth-child(6){transition-delay:.30s;} } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ header{ padding-top:10px; } .navbar{ width:94%; min-height:66px; padding-inline:18px; } .logo a{ font-size:1.15rem; } .nav-links{ padding:28px 16px; gap:22px; } } /* ========================================================== VERY SMALL DEVICES ========================================================== */ @media (max-width:360px){ .navbar{ padding-inline:14px; } .logo a{ font-size:1rem; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:600px) and (orientation:landscape){ .nav-links{ max-height:70vh; overflow-y:auto; } } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .nav-links a:focus-visible, .btn:focus-visible{ outline:2px solid #573721; outline-offset:5px; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .logo, .nav-links li, .btn{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ========================================================== GALLERY SECTION ========================================================== */ .gallery-section{ position:relative; overflow:hidden; width:100%; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding: clamp(70px,8vw,120px) clamp(20px,8vw,140px); background-image: url("./assets/ChatGPT Image Sep 24, 2026, 02_40_37 PM.png"), url("./assets/Parchment Marble with Lotus Corner.png"); background-repeat: no-repeat, repeat; background-position: center, center; background-size: cover, auto; } /* ========================================================== HEADER ========================================================== */ .gallery-header{ width:min(850px,100%); margin-inline:auto; text-align:center; } .gallery-tag{ color:#8B5E3C; text-transform:uppercase; letter-spacing:.28em; font-size:clamp(.85rem,.9vw,.95rem); margin-bottom:18px; font-family:Arial,Helvetica,sans-serif; } .gallery-title{ font-family:"Cormorant Garamond",serif; font-weight:400; color:#552505; font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.08; margin-bottom:24px; } .gallery-description{ width:min(650px,100%); margin-inline:auto; color:#6d4828; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.8; } /* ========================================================== SLIDER ========================================================== */ .gallery-slider{ margin-top:clamp(50px,6vw,80px); display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,40px); } /* ========================================================== TRACK ========================================================== */ .gallery-track{ position:relative; width:min(920px,100%); aspect-ratio:16/10; overflow:hidden; border-radius:22px; flex-shrink:1; } /* ========================================================== IMAGES ========================================================== */ .gallery-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition: opacity .7s ease, transform .7s ease; box-shadow: 0 20px 60px rgba(0,0,0,.18); } .gallery-image.active{ opacity:1; transform:scale(1); } /* ========================================================== SLIDER BUTTONS ========================================================== */ .prev, .next{ display:flex; justify-content:center; align-items:center; width:clamp(44px,4vw,58px); aspect-ratio:1; border:none; border-radius:50%; background:#8B5E3C; color:#fff; cursor:pointer; font-size:clamp(1rem,2vw,1.3rem); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; flex-shrink:0; } .prev:hover, .next:hover{ background:#6F472C; transform:translateY(-4px); box-shadow: 0 14px 35px rgba(0,0,0,.18); } .prev:active, .next:active{ transform:translateY(-1px); } /* ========================================================== DOTS ========================================================== */ .gallery-dots{ margin-top:clamp(24px,3vw,38px); display:flex; justify-content:center; align-items:center; gap:12px; } .dot{ width:10px; aspect-ratio:1; border-radius:50%; background:#c2a17d; cursor:pointer; transition: transform .3s ease, background .3s ease; } .dot:hover{ transform:scale(1.2); } .dot.active{ background:#8B5E3C; transform:scale(1.35); } /* ========================================================== LOTUS DECORATIONS ========================================================== */ .lotus-side{ position:absolute; inset-block:0; width:clamp(90px,8vw,140px); display:flex; justify-content:center; pointer-events:none; user-select:none; z-index:1; } .left{ left:clamp(10px,2vw,25px); } .right{ right:clamp(10px,2vw,25px); } .lotus-block{ height:100%; display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; } /* ========================================================== DECORATIVE LINE ========================================================== */ .line{ width:2px; flex:1; background:#573721; opacity:.35; } /* ========================================================== LOTUS ICON ========================================================== */ .lotus-svg{ width:clamp(48px,5vw,68px); height:auto; fill:#8B5E3C; animation:spinLotus 22s linear infinite; opacity:.95; } .lotus-reverse{ animation-direction:reverse; } /* ========================================================== ANIMATION ========================================================== */ @keyframes spinLotus{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .gallery-track{ width:min(1100px,100%); } .gallery-header{ max-width:900px; } } /* ========================================================== DESKTOP / LAPTOP ========================================================== */ @media (max-width:1400px){ .gallery-section{ padding: 100px clamp(30px,6vw,90px); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:1024px){ .gallery-section{ padding: 90px 40px; } .gallery-slider{ gap:20px; } .gallery-track{ width:100%; } .lotus-side{ display:none; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .gallery-section{ min-height:auto; padding: 70px 20px; background-position:center; background-size:cover; } .gallery-header{ width:100%; } .gallery-slider{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px; margin-top:40px; } .gallery-track{ width:100%; aspect-ratio:16/10; border-radius:18px; } .gallery-image{ border-radius:18px; } .gallery-dots{ margin-top:24px; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .gallery-section{ padding: 60px 16px; } .gallery-slider{ gap:10px; } .prev, .next{ width:42px; font-size:1rem; } .gallery-track{ border-radius:14px; } .gallery-image{ border-radius:14px; } } /* ========================================================== VERY SMALL DEVICES ========================================================== */ @media (max-width:360px){ .gallery-title{ line-height:1.15; } .gallery-description{ line-height:1.7; } .gallery-slider{ grid-template-columns: 38px 1fr 38px; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:600px) and (orientation:landscape){ .gallery-section{ min-height:700px; } .gallery-track{ width:min(700px,100%); } } /* ========================================================== DESKTOP MODE ON PHONES ========================================================== */ @media (max-height:500px){ .gallery-track{ aspect-ratio:16/9; } } /* ========================================================== ACCESSIBILITY ========================================================== */ .prev:focus-visible, .next:focus-visible, .dot:focus-visible{ outline:2px solid #573721; outline-offset:4px; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .gallery-image{ transition:none; transform:none; } .lotus-svg{ animation:none; } .prev, .next, .dot{ transition:none; } } /* ========================================================== COURSES SECTION ========================================================== */ .courses-section{ width:100%; position:relative; overflow:hidden; padding: clamp(70px,8vw,120px) clamp(20px,8vw,140px); background:url("./assets/courses-section1.png"); background-size:cover; background-position:center; background-repeat:no-repeat; } /* ========================================================== SECTION HEADER ========================================================== */ .courses-heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(40px,6vw,100px); margin-bottom:clamp(50px,6vw,80px); } .heading-left{ flex:1; min-width:280px; } .heading-right{ flex:.8; min-width:260px; } /* ========================================================== TAG ========================================================== */ .section-tag{ font-family:monospace; font-size:clamp(.85rem,.9vw,.95rem); letter-spacing:.35em; color:#8B5E3C; margin-bottom:18px; } /* ========================================================== TITLE ========================================================== */ .heading-left h2{ font-family:"Cormorant Garamond",serif; font-weight:500; color:#4B2A12; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; } .heading-left span{ display:block; margin-top:20px; font-size:clamp(.9rem,1vw,1rem); letter-spacing:.22em; color:#8B5E3C; } /* ========================================================== DESCRIPTION ========================================================== */ .heading-right p{ color:#5F4633; font-size:clamp(1rem,1.1vw,1.08rem); line-height:1.9; max-width:42ch; } /* ========================================================== GRID ========================================================== */ .courses-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(260px,1fr) ); gap:clamp(20px,2.5vw,32px); align-items:stretch; } /* ========================================================== CARD ========================================================== */ .course-card{ display:flex; flex-direction:column; height:100%; overflow:hidden; background:#FDF8F2; border-radius:18px; cursor:pointer; transition: transform .45s ease, box-shadow .45s ease; box-shadow: 0 12px 35px rgba(0,0,0,.08); } /* ========================================================== COURSE IMAGE ========================================================== */ .course-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition: transform .55s ease, filter .45s ease; } /* ========================================================== COURSE CONTENT ========================================================== */ .course-info{ display:flex; flex-direction:column; flex:1; padding:clamp(20px,2vw,28px); } /* ========================================================== DURATION ========================================================== */ .duration{ display:inline-flex; align-items:center; width:fit-content; padding-bottom:6px; margin-bottom:14px; border-bottom:1px solid #CFAE82; color:#9B6B3D; font-size:clamp(.85rem,.9vw,.95rem); letter-spacing:.04em; } /* ========================================================== COURSE TITLE ========================================================== */ .course-info h3{ font-family:"Cormorant Garamond",serif; font-weight:500; color:#4A250F; font-size:clamp(1.7rem,2vw,2.15rem); line-height:1.15; margin-bottom:14px; } /* ========================================================== COURSE DESCRIPTION ========================================================== */ .course-info p{ flex:1; color:#6B5445; font-size:clamp(.95rem,1vw,1rem); line-height:1.8; } /* ========================================================== CARD HOVER ========================================================== */ .course-card:hover{ transform: translateY(-12px) scale(1.02); box-shadow: 0 28px 60px rgba(0,0,0,.18); } .course-card:hover img{ transform:scale(1.08); filter:saturate(1.08); } /* ========================================================== SMOOTH INTERACTION ========================================================== */ .course-card:active{ transform: translateY(-6px) scale(1.01); } /* ========================================================== ACCESSIBILITY ========================================================== */ .course-card:focus-within{ outline:2px solid #8B5E3C; outline-offset:4px; } /* ========================================================== OPTIONAL GLASS BORDER ========================================================== */ .course-card{ border:1px solid rgba(139,94,60,.08); } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .courses-section{ padding: 120px clamp(80px,8vw,180px); } .courses-grid{ grid-template-columns: repeat(5,minmax(280px,1fr)); } } /* ========================================================== DESKTOP / LAPTOP ========================================================== */ @media (max-width:1400px){ .courses-section{ padding: 100px clamp(30px,6vw,80px); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:1100px){ .courses-heading{ flex-direction:column; align-items:flex-start; gap:40px; } .heading-right{ width:100%; max-width:700px; } .courses-grid{ grid-template-columns: repeat(2,minmax(260px,1fr)); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .courses-section{ padding: 70px 20px; } .courses-heading{ gap:28px; margin-bottom:45px; } .heading-left, .heading-right{ width:100%; } .heading-right p{ max-width:100%; } .courses-grid{ display:flex; overflow-x:auto; gap:20px; padding-bottom:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .courses-grid::-webkit-scrollbar{ display:none; } .course-card{ min-width:290px; max-width:320px; flex-shrink:0; scroll-snap-align:center; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .courses-section{ padding: 60px 16px; } .course-card{ min-width:260px; } .course-info{ padding:20px; } } /* ========================================================== VERY SMALL DEVICES ========================================================== */ @media (max-width:360px){ .course-card{ min-width:235px; } .heading-left h2{ line-height:1.12; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:600px) and (orientation:landscape){ .courses-grid{ grid-template-columns: repeat(2,minmax(260px,1fr)); } } /* ========================================================== DESKTOP MODE ON PHONES ========================================================== */ @media (max-height:500px){ .courses-section{ padding-top:80px; } } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .course-card:focus-within{ outline:2px solid #8B5E3C; outline-offset:4px; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .course-card, .course-card img{ transition:none; transform:none !important; } } /* ========================================================== CONTACT SECTION ========================================================== */ .contact-section{ position:relative; overflow:hidden; width:100%; min-height:100dvh; display:flex; justify-content:space-between; align-items:center; gap:clamp(50px,7vw,90px); padding: clamp(70px,8vw,120px) clamp(20px,8vw,140px); background-image: url("./assets/contact-page2.png"), url("./assets/contact-page1.png"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } /* ========================================================== LEFT SECTION ========================================================== */ .contacts-left-section{ flex:1; width:100%; max-width:650px; } /* ========================================================== TAG ========================================================== */ .contacts{ color:#8B5E3C; font-family:"Courier New",monospace; font-size:clamp(.9rem,.9vw,.95rem); letter-spacing:.32em; margin-bottom:18px; opacity:0; transform:translateY(35px); } /* ========================================================== TITLE ========================================================== */ .contacts-left-section .main-title{ font-family:"Cormorant Garamond",serif; font-weight:400; color:#552505; font-size:clamp(2.6rem,6vw,4.8rem); line-height:1.08; margin-bottom:10px; opacity:0; transform:translateY(35px); } .contacts-left-section .subtitle{ color:#8B5E3C; letter-spacing:.22em; font-size:clamp(.9rem,1vw,1rem); margin-bottom:32px; opacity:0; transform:translateY(35px); } /* ========================================================== DESCRIPTION ========================================================== */ .contacts-left-section .description{ color:#552505; font-size:clamp(1rem,1.1vw,1.08rem); line-height:1.9; max-width:42ch; opacity:0; transform:translateY(35px); } /* ========================================================== CONTACT LIST ========================================================== */ .contacts-bottom-section{ margin-top:clamp(45px,6vw,70px); } .contact{ display:flex; align-items:center; gap:22px; margin-bottom:28px; opacity:0; transform:translateX(-50px); } /* ========================================================== ICON ========================================================== */ .contact .icon{ width:60px; aspect-ratio:1; display:flex; justify-content:center; align-items:center; border-radius:50%; background:#fff7f1; flex-shrink:0; transition: transform .35s ease, background .35s ease, box-shadow .35s ease; } .contact:hover .icon{ background:#5A0D0D; transform:translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,.15); } .contact:hover svg{ stroke:#fff; } /* ========================================================== DETAILS ========================================================== */ .contact-details{ display:flex; flex-direction:column; gap:5px; } .type{ font-weight:700; color:#552505; font-size:1rem; } .value{ color:#8B5E3C; font-size:clamp(.95rem,1vw,1rem); line-height:1.6; } /* ========================================================== RIGHT SECTION ========================================================== */ .contacts-right-section{ flex:1; display:flex; justify-content:center; align-items:center; width:100%; } /* ========================================================== FORM ========================================================== */ form{ width:100%; max-width:520px; padding:clamp(24px,3vw,42px); background:rgba(255,255,255,.42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.35); border-radius:22px; box-shadow: 0 30px 60px rgba(0,0,0,.12); opacity:0; transform:translateY(70px); transition: transform .4s ease, box-shadow .4s ease; } form:hover{ transform:translateY(-6px); box-shadow: 0 40px 80px rgba(0,0,0,.18); } /* ========================================================== FORM GROUP ========================================================== */ .form-group{ margin-bottom:22px; } .form-group:last-of-type{ margin-bottom:28px; } /* ========================================================== LABELS ========================================================== */ .form-group label{ display:block; margin-bottom:10px; color:#5A3D2B; font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .form-group span{ color:#7F2323; } /* ========================================================== INPUTS ========================================================== */ .form-group input, .form-group textarea, .form-group select{ width:100%; padding:15px 16px; font-size:1rem; color:#333; background:rgba(255,255,255,.45); border:1px solid #D8C6B2; border-radius:12px; outline:none; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; } .form-group textarea{ resize:vertical; min-height:170px; } .form-group select{ cursor:pointer; } /* ========================================================== PLACEHOLDER ========================================================== */ .form-group input::placeholder, .form-group textarea::placeholder{ color:#9D9185; } /* ========================================================== FOCUS ========================================================== */ .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color:#5A0D0D; background:#fff; box-shadow: 0 0 0 4px rgba(90,13,13,.08); } /* ========================================================== BUTTON ========================================================== */ form button{ width:100%; display:flex; justify-content:center; align-items:center; gap:10px; padding:16px; border:none; border-radius:12px; background:#5A0D0D; color:#fff; cursor:pointer; font-size:.9rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } form button::after{ content:"→"; transition:transform .3s ease; } form button:hover{ background:#731515; transform:translateY(-2px); box-shadow: 0 15px 35px rgba(90,13,13,.25); } form button:hover::after{ transform:translateX(6px); } form button:active{ transform:translateY(0); } /* ========================================================== ANIMATION ========================================================== */ .animate{ opacity:1 !important; transform:none !important; transition: 1s cubic-bezier(.2,.7,.2,1); } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .contact-section{ padding: 120px clamp(80px,8vw,180px); } form{ max-width:560px; } } /* ========================================================== DESKTOP / LAPTOP ========================================================== */ @media (max-width:1400px){ .contact-section{ padding: 100px clamp(30px,6vw,80px); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:1100px){ .contact-section{ flex-direction:column; align-items:flex-start; gap:60px; min-height:auto; } .contacts-left-section, .contacts-right-section{ width:100%; max-width:100%; } .contacts-left-section .description{ max-width:100%; } .contacts-left-section .description br{ display:none; } form{ max-width:100%; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .contact-section{ padding: 70px 20px; gap:45px; } .contacts-bottom-section{ margin-top:40px; } .contact{ gap:18px; } .contact .icon{ width:54px; } form{ padding:28px; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .contact-section{ padding: 60px 16px; } .contact{ align-items:flex-start; } .contact .icon{ width:48px; } .type{ font-size:.95rem; } .value{ font-size:.92rem; } form{ padding:22px; border-radius:18px; } .form-group input, .form-group textarea, .form-group select{ padding:14px; } form button{ padding:15px; } } /* ========================================================== VERY SMALL DEVICES ========================================================== */ @media (max-width:360px){ .contacts{ letter-spacing:.18em; } .contacts-left-section .subtitle{ letter-spacing:.1em; } .contact{ gap:14px; } .contact .icon{ width:44px; } .form-group label{ letter-spacing:.08em; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:600px) and (orientation:landscape){ .contact-section{ min-height:700px; padding-top:80px; padding-bottom:80px; } } /* ========================================================== DESKTOP MODE ON PHONES ========================================================== */ @media (max-height:500px){ .contact-section{ min-height:750px; } } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{ outline:2px solid #5A0D0D; outline-offset:3px; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ========================================================== ROOT VARIABLES ========================================================== */ :root{ --gold:#d7b46a; --gold-light:#f2dfb0; --gold-dark:#9f7b3d; --white:#f8f6f2; --text:#d7d2c8; --dark:rgba(16,11,8,.22); --line:rgba(215,180,106,.18); } /* ========================================================== FOOTER ========================================================== */ .sd-footer{ position:relative; width:100%; background:#2D140E; color:#F8F2EC; overflow:hidden; } /* ========================================================== FOOTER HERO (EMPTY SPACE) ========================================================== */ .footer-hero{ position:relative; width:100%; height:clamp(180px,22vw,320px); flex-shrink:0; } .footer-hero-overlay{ position:absolute; inset:0; background:transparent; } /* ========================================================== MAIN CONTAINER ========================================================== */ .footer-container{ position:relative; width:min(1450px,92%); margin:0 auto; padding: clamp(40px,5vw,70px) 0 clamp(35px,4vw,55px); display:grid; grid-template-columns: 2fr 1fr 1fr 1.3fr 1.1fr; gap:clamp(25px,2.5vw,55px); align-items:start; } /* ========================================================== COMMON COLUMN ========================================================== */ .footer-item{ display:flex; flex-direction:column; } /* ========================================================== ABOUT ========================================================== */ .footer-about{ max-width:420px; } .footer-logo{ margin-bottom:14px; } .footer-logo img{ max-width:180px; height:auto; } .footer-subtitle{ color:#D7B999; letter-spacing:.18em; font-size:.82rem; margin-bottom:14px; } .footer-heading{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(2rem,3vw,3rem); line-height:1.1; color:#FFF; margin-bottom:16px; } .footer-description{ color:#D8C5B4; line-height:1.65; font-size:.98rem; margin-bottom:22px; max-width:36ch; } /* ========================================================== FOOTER COLUMN TITLES ========================================================== */ .footer-column h3{ font-family:"Cormorant Garamond",serif; font-size:1.7rem; font-weight:500; color:#FFF; margin-bottom:18px; } /* ========================================================== FOOTER MENU ========================================================== */ .footer-menu, .footer-list, .footer-contact{ list-style:none; padding:0; margin:0; } .footer-menu li, .footer-list li, .footer-contact li{ margin-bottom:12px; } .footer-menu a, .footer-list li, .footer-contact, .footer-contact a{ color:#D8C5B4; text-decoration:none; font-size:.97rem; line-height:1.6; transition: color .3s ease, transform .3s ease; } .footer-menu a:hover, .footer-contact a:hover{ color:#FFF; transform:translateX(5px); } /* ========================================================== CONTACT ========================================================== */ .footer-contact span{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#C79E72; margin-bottom:4px; } /* ========================================================== BLOG CARD ========================================================== */ .blog-card{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; } .blog-image{ flex-shrink:0; width:90px; height:90px; overflow:hidden; border-radius:8px; } .blog-image img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .blog-card:hover .blog-image img{ transform:scale(1.08); } .blog-content{ display:flex; flex-direction:column; justify-content:center; gap:8px; } .blog-content h4{ margin:0; font-size:1rem; font-weight:500; line-height:1.4; } .blog-content h4 a{ color:#FFF; text-decoration:none; } .view-more{ display:inline-flex; align-items:center; gap:6px; color:#C79E72; font-size:.88rem; text-decoration:none; transition:gap .3s ease; } .view-more:hover{ gap:10px; } /* ========================================================== SOCIAL ICONS ========================================================== */ .footer-social{ display:flex; align-items:center; gap:14px; margin-top:10px; } .footer-social a{ width:46px; height:46px; display:flex; justify-content:center; align-items:center; border:1px solid rgba(255,255,255,.15); color:#F8F2EC; text-decoration:none; font-size:1.1rem; transition: background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease; } .footer-social a:hover{ background:#8B5E3C; border-color:#8B5E3C; color:#fff; transform:translateY(-4px); } /* ========================================================== FOOTER BOTTOM ========================================================== */ .footer-bottom{ width:min(1450px,92%); margin:0 auto; padding:24px 0; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; } /* ========================================================== COPYRIGHT ========================================================== */ .footer-copy{ color:#CDB8A5; font-size:.9rem; } /* ========================================================== CENTER TEXT ========================================================== */ .footer-center{ color:#B8926D; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; text-align:center; } /* ========================================================== POLICY LINKS ========================================================== */ .footer-policy{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .footer-policy span{ color:rgba(255,255,255,.25); } .footer-policy a{ color:#CDB8A5; text-decoration:none; transition:color .3s ease; } .footer-policy a:hover{ color:#fff; } /* ========================================================== BACK TO TOP ========================================================== */ #scrollTop{ position:fixed; right:28px; bottom:28px; width:52px; height:52px; border:none; background:#8B5E3C; color:#fff; font-size:1.2rem; cursor:pointer; opacity:0; visibility:hidden; transition: opacity .35s ease, transform .35s ease, background .35s ease; z-index:999; } #scrollTop.show{ opacity:1; visibility:visible; } #scrollTop:hover{ background:#6E4324; transform:translateY(-5px); } /* ========================================================== LARGE DESKTOPS ========================================================== */ @media (min-width:1600px){ .footer-container{ width:min(1550px,90%); gap:70px; } } /* ========================================================== LAPTOP ========================================================== */ @media (max-width:1300px){ .footer-container{ grid-template-columns: repeat(3,1fr); gap:50px; } .footer-about{ grid-column:1/-1; max-width:650px; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:992px){ .footer-hero{ height:180px; } .footer-container{ grid-template-columns: repeat(2,1fr); gap:40px; padding: 50px 0 40px; } .footer-about{ grid-column:1/-1; max-width:100%; } .footer-bottom{ flex-direction:column; text-align:center; gap:18px; } .footer-policy{ justify-content:center; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .footer-hero{ height:120px; } .footer-container{ grid-template-columns:1fr; gap:32px; padding: 40px 0 30px; } .footer-about{ max-width:100%; } .footer-heading{ font-size:2.2rem; } .footer-description{ max-width:100%; } .footer-social{ justify-content:flex-start; flex-wrap:wrap; } .blog-card{ align-items:center; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .footer-hero{ height:90px; } .footer-container{ width:92%; gap:28px; } .footer-heading{ font-size:1.9rem; } .footer-column h3{ font-size:1.45rem; } .footer-social a{ width:42px; height:42px; font-size:1rem; } .blog-image{ width:75px; height:75px; } #scrollTop{ width:46px; height:46px; right:18px; bottom:18px; } } /* ========================================================== LANDSCAPE PHONES ========================================================== */ @media (max-height:650px) and (orientation:landscape){ .footer-hero{ height:100px; } .footer-container{ padding-top:35px; gap:28px; } } /* ========================================================== DESKTOP MODE ON PHONES ========================================================== */ /* Chrome desktop mode on phones reports around 980px. This prevents giant spacing and keeps the footer compact. */ @media (min-width:900px) and (max-width:1100px){ .footer-container{ grid-template-columns: repeat(2,1fr); gap:42px; } .footer-about{ grid-column:1/-1; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }