/* ============================================================ SARANG GROUP — Website CSS Brand: Graphite #111316 | Cobalt #1557FF | Warm White #F7F6F2 Supports Light & Dark themes via [data-theme] on ============================================================ */ /* ---------- THEME VARIABLES ---------- */ :root, :root[data-theme="dark"] { --sg-bg: #111316; --sg-bg-alt: #0a0b0d; --sg-heading: #FFFFFF; --sg-text: #F7F6F2; --sg-muted: #9CA3AF; --sg-faint: #6B7280; --sg-ghost: rgba(255,255,255,0.3); --sg-ghost-faint: rgba(255,255,255,0.2); --sg-card-bg: rgba(255,255,255,0.025); --sg-card-bg-2: rgba(255,255,255,0.02); --sg-card-border: rgba(255,255,255,0.07); --sg-card-border-2: rgba(255,255,255,0.06); --sg-card-shadow: none; --sg-input-bg: rgba(255,255,255,0.04); --sg-input-bg-focus: rgba(255,255,255,0.06); --sg-input-border: rgba(255,255,255,0.1); --sg-placeholder: #6B7280; --sg-nav-bg: rgba(17,19,22,0.9); --sg-nav-bg-mobile: rgba(17,19,22,0.98); --sg-nav-border: rgba(255,255,255,0.05); --sg-badge-bg: rgba(255,255,255,0.04); --sg-badge-border: rgba(255,255,255,0.08); --sg-grid-line: rgba(255,255,255,0.015); --sg-select-bg: #1a1d22; --sg-hamburger: #FFFFFF; --sg-accent: #1557FF; --sg-accent-hover: #1148d4; --sg-accent-soft: rgba(21,87,255,0.15); --sg-accent-soft-border: rgba(21,87,255,0.3); --sg-logo-filter: none; } :root[data-theme="light"] { --sg-bg: #F7F6F2; --sg-bg-alt: #ECEBE5; --sg-heading: #111316; --sg-text: #2A2D33; --sg-muted: #5B6472; --sg-faint: #7A828F; --sg-ghost: rgba(17,19,22,0.45); --sg-ghost-faint: rgba(17,19,22,0.35); --sg-card-bg: #FFFFFF; --sg-card-bg-2: #FFFFFF; --sg-card-border: rgba(17,19,22,0.08); --sg-card-border-2: rgba(17,19,22,0.07); --sg-card-shadow: 0 4px 24px rgba(17,19,22,0.07); --sg-input-bg: #FFFFFF; --sg-input-bg-focus: #FFFFFF; --sg-input-border: rgba(17,19,22,0.15); --sg-placeholder: #9AA0AC; --sg-nav-bg: rgba(247,246,242,0.85); --sg-nav-bg-mobile: rgba(247,246,242,0.98); --sg-nav-border: rgba(17,19,22,0.08); --sg-badge-bg: rgba(17,19,22,0.03); --sg-badge-border: rgba(17,19,22,0.1); --sg-grid-line: rgba(17,19,22,0.025); --sg-select-bg: #FFFFFF; --sg-hamburger: #111316; --sg-accent: #1557FF; --sg-accent-hover: #1148d4; --sg-accent-soft: rgba(21,87,255,0.1); --sg-accent-soft-border: rgba(21,87,255,0.35); --sg-logo-filter: brightness(0); } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--sg-bg); color: var(--sg-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.35s ease, color 0.35s ease; } /* Coming Soon Page */ .sg-coming-soon { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; position: relative; overflow: hidden; background: var(--sg-bg); transition: background-color 0.35s ease; } /* Background Effects */ .sg-coming-soon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 25% 35%, rgba(21, 87, 255, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(21, 87, 255, 0.05) 0%, transparent 55%); pointer-events: none; } .sg-coming-soon::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(var(--sg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--sg-grid-line) 1px, transparent 1px); background-size: 100px 100px; pointer-events: none; } .sg-coming-soon__content { position: relative; z-index: 2; max-width: 540px; width: 100%; } /* Logo */ .sg-logo { margin-bottom: 48px; } .sg-logo__img { max-height: 50px; width: auto; } /* Location Badge */ .sg-location { display: inline-flex; align-items: center; gap: 10px; background: var(--sg-badge-bg); border: 1px solid var(--sg-badge-border); border-radius: 100px; padding: 10px 22px; margin-bottom: 36px; font-size: 0.82rem; color: var(--sg-muted); letter-spacing: 0.5px; transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; } .sg-location__dot { width: 8px; height: 8px; background: var(--sg-accent); border-radius: 50%; animation: pulse 2.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } /* Title */ .sg-title { font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 3px; line-height: 1.2; margin-bottom: 20px; transition: color 0.35s ease; } .sg-title__accent { color: var(--sg-accent); } /* Subtitle */ .sg-subtitle { font-size: 1rem; color: var(--sg-muted); line-height: 1.8; margin-bottom: 44px; transition: color 0.35s ease; } /* Form Card */ .sg-form-card { background: var(--sg-card-bg); border: 1px solid var(--sg-card-border); border-radius: 16px; padding: 36px 32px; margin-bottom: 36px; backdrop-filter: blur(10px); box-shadow: var(--sg-card-shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .sg-form-card__title { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--sg-heading); margin-bottom: 24px; transition: color 0.35s ease; } .sg-form input, .sg-form select { width: 100%; padding: 15px 18px; margin-bottom: 14px; background: var(--sg-input-bg); border: 1px solid var(--sg-input-border); border-radius: 10px; color: var(--sg-heading); font-family: 'Inter', sans-serif; font-size: 0.92rem; transition: all 0.3s ease; outline: none; } .sg-form input::placeholder { color: var(--sg-placeholder); } .sg-form input:focus, .sg-form select:focus { border-color: var(--sg-accent); box-shadow: 0 0 0 3px rgba(21, 87, 255, 0.12); background: var(--sg-input-bg-focus); } .sg-form select { color: var(--sg-placeholder); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .sg-form select option { background: var(--sg-select-bg); color: var(--sg-text); } .sg-form button { width: 100%; padding: 16px; background: var(--sg-accent); color: #FFFFFF; border: none; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 2.5px; cursor: pointer; margin-top: 6px; transition: all 0.3s ease; } .sg-form button:hover { background: var(--sg-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(21, 87, 255, 0.35); } .sg-form button:active { transform: translateY(0); } .sg-form button.loading { opacity: 0.7; pointer-events: none; } .sg-form-card__privacy { font-size: 0.7rem; color: var(--sg-ghost); margin-top: 16px; } /* Success Message */ .sg-success { display: none; text-align: center; padding: 24px; } .sg-success.show { display: block; } .sg-success__icon { font-size: 48px; margin-bottom: 16px; } .sg-success__text { font-size: 1.1rem; color: var(--sg-heading); margin-bottom: 8px; } .sg-success__sub { font-size: 0.85rem; color: var(--sg-muted); } /* Contact */ .sg-contact { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; } .sg-contact__item { display: flex; align-items: center; gap: 8px; color: var(--sg-muted); text-decoration: none; font-size: 0.82rem; transition: color 0.3s ease; } .sg-contact__item:hover { color: var(--sg-accent); } .sg-contact__item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Footer */ .sg-footer { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; } .sg-footer p { font-size: 0.68rem; color: var(--sg-ghost-faint); line-height: 1.8; } /* WhatsApp Float */ .sg-whatsapp { position: fixed; bottom: 28px; right: 28px; width: 54px; height: 54px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 9999; transition: all 0.3s ease; text-decoration: none; } .sg-whatsapp:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); } .sg-whatsapp svg { width: 26px; height: 26px; } /* ---- RESPONSIVE ---- */ @media (max-width: 768px) { .sg-coming-soon { padding: 40px 20px; } .sg-logo__img { max-height: 40px; } .sg-title { font-size: 2rem; letter-spacing: 2px; } .sg-form-card { padding: 28px 20px; } .sg-contact { flex-direction: column; gap: 14px; align-items: center; } .sg-whatsapp { bottom: 20px; right: 20px; width: 48px; height: 48px; } .sg-whatsapp svg { width: 22px; height: 22px; } } @media (max-width: 400px) { .sg-title { font-size: 1.7rem; letter-spacing: 1.5px; } .sg-subtitle { font-size: 0.9rem; } } /* ============================================================ NAVIGATION ============================================================ */ .sg-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--sg-nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sg-nav-border); transition: background-color 0.35s ease, border-color 0.35s ease; } .sg-nav__inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; } .sg-nav__logo img { height: 32px; width: auto; filter: var(--sg-logo-filter); transition: filter 0.35s ease; } .sg-nav__right { display: flex; align-items: center; gap: 10px; } .sg-nav__links { display: flex; align-items: center; gap: 8px; } .sg-nav__link { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sg-muted); text-decoration: none; padding: 8px 16px; border-radius: 6px; transition: all 0.3s ease; } .sg-nav__link:hover { color: var(--sg-heading); } .sg-nav__link--active { color: var(--sg-heading); } .sg-nav__link--login { background: var(--sg-accent-soft); color: var(--sg-accent); border: 1px solid var(--sg-accent-soft-border); } .sg-nav__link--login:hover { background: var(--sg-accent); color: #FFFFFF; border-color: var(--sg-accent); } /* Theme Toggle Button */ .sg-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--sg-card-border); background: var(--sg-badge-bg); color: var(--sg-muted); cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; padding: 0; } .sg-theme-toggle:hover { color: var(--sg-heading); border-color: var(--sg-accent); } .sg-theme-toggle svg { width: 18px; height: 18px; } :root[data-theme="dark"] .sg-theme-toggle__moon { display: none; } :root[data-theme="dark"] .sg-theme-toggle__sun { display: block; } :root[data-theme="light"] .sg-theme-toggle__sun { display: none; } :root[data-theme="light"] .sg-theme-toggle__moon { display: block; } .sg-nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; } .sg-nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--sg-hamburger); border-radius: 1px; transition: background-color 0.35s ease; } /* Fix scroll - Coming Soon with nav */ .sg-coming-soon--with-nav { padding-top: 80px; min-height: 100vh; } /* ============================================================ PAGES (About, Contact) ============================================================ */ .sg-page { background: var(--sg-bg); min-height: 100vh; padding-top: 100px; padding-bottom: 60px; transition: background-color 0.35s ease; } .sg-page__container { max-width: 800px; margin: 0 auto; padding: 0 24px; } .sg-page__header { text-align: center; margin-bottom: 48px; } .sg-page__title { font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; transition: color 0.35s ease; } .sg-page__title span { color: var(--sg-accent); } .sg-page__subtitle { font-size: 1rem; color: var(--sg-muted); margin-top: 12px; transition: color 0.35s ease; } .sg-accent-line { width: 50px; height: 3px; background: var(--sg-accent); margin: 0 auto; border-radius: 2px; } /* About Page */ .sg-about-section { margin-bottom: 48px; } .sg-about-section h2 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; transition: color 0.35s ease; } .sg-about-section p { font-size: 0.95rem; color: var(--sg-muted); line-height: 1.8; margin-bottom: 12px; transition: color 0.35s ease; } .sg-about-section p strong { color: var(--sg-heading); } .sg-about-cta { text-align: center; padding: 40px; background: var(--sg-card-bg-2); border: 1px solid var(--sg-card-border-2); border-radius: 16px; box-shadow: var(--sg-card-shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .sg-about-cta p { font-size: 1.1rem; margin-bottom: 24px; } .sg-btn { display: inline-block; padding: 14px 32px; background: var(--sg-accent); color: #FFFFFF; text-decoration: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; } .sg-btn:hover { background: var(--sg-accent-hover); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(21, 87, 255, 0.3); } /* Values Grid */ .sg-about-values h2 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; transition: color 0.35s ease; } .sg-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sg-value-card { background: var(--sg-card-bg-2); border: 1px solid var(--sg-card-border-2); border-radius: 12px; padding: 24px; text-align: center; box-shadow: var(--sg-card-shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .sg-value-card__icon { font-size: 28px; color: var(--sg-accent); margin-bottom: 12px; } .sg-value-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; transition: color 0.35s ease; } .sg-value-card p { font-size: 0.82rem; color: var(--sg-faint); line-height: 1.6; transition: color 0.35s ease; } /* Contact Page */ .sg-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .sg-contact-info__item { margin-bottom: 28px; } .sg-contact-info__item h3 { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--sg-faint); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; transition: color 0.35s ease; } .sg-contact-info__item a, .sg-contact-info__item p { font-size: 0.95rem; color: var(--sg-heading); text-decoration: none; line-height: 1.6; transition: color 0.35s ease; } .sg-contact-info__item a:hover { color: var(--sg-accent); } .sg-contact-form-card { background: var(--sg-card-bg); border: 1px solid var(--sg-card-border); border-radius: 16px; padding: 32px; box-shadow: var(--sg-card-shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .sg-contact-form-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--sg-heading); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; transition: color 0.35s ease; } /* Site Footer */ .sg-site-footer { background: var(--sg-bg-alt); padding: 24px; text-align: center; border-top: 1px solid var(--sg-nav-border); transition: background-color 0.35s ease, border-color 0.35s ease; } .sg-site-footer p { font-size: 0.7rem; color: var(--sg-ghost); line-height: 1.8; transition: color 0.35s ease; } /* ============================================================ RESPONSIVE — Navigation + Pages ============================================================ */ @media (max-width: 768px) { .sg-nav__hamburger { display: flex; } .sg-nav__links { display: none; position: absolute; top: 65px; left: 0; right: 0; background: var(--sg-nav-bg-mobile); padding: 16px 24px; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--sg-nav-border); } .sg-nav__links.open { display: flex; } .sg-nav__link { padding: 12px 16px; width: 100%; } .sg-values-grid { grid-template-columns: 1fr; } .sg-contact-grid { grid-template-columns: 1fr; gap: 32px; } .sg-page__title { font-size: 1.7rem; } } /* ============================================================ SIGN IN PAGE (static, submits to Odoo /web/login) ============================================================ */ .sg-signin { background: var(--sg-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 20px 40px; position: relative; overflow: hidden; transition: background-color 0.35s ease; } .sg-signin::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 25% 35%, rgba(21, 87, 255, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(21, 87, 255, 0.05) 0%, transparent 55%); pointer-events: none; } .sg-signin__card { position: relative; z-index: 2; max-width: 400px; width: 100%; background: var(--sg-card-bg); border: 1px solid var(--sg-card-border); border-radius: 16px; padding: 40px 34px; backdrop-filter: blur(10px); box-shadow: var(--sg-card-shadow); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .sg-signin__logo { text-align: center; margin-bottom: 28px; } .sg-signin__logo img { height: 42px; width: auto; } .sg-signin__title { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--sg-heading); text-align: center; margin-bottom: 24px; } .sg-signin__error { display: none; background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.3); color: #FCA5A5; font-size: 0.8rem; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; text-align: center; } .sg-signin__error.show { display: block; } .sg-signin__links { text-align: center; margin-top: 16px; } .sg-signin__links a { color: #6B8AFF; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; font-weight: 500; } .sg-signin__links a:hover { color: var(--sg-accent); } .sg-form button:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* ---------- PULL TO REFRESH (MOBILE) ---------- */ .sg-ptr { position: fixed; top: -50px; left: 50%; transform: translateX(-50%) translate3d(0, 0, 0); width: 42px; height: 42px; border-radius: 50%; background: var(--sg-bg); border: 1px solid var(--sg-card-border); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, top 0.2s cubic-bezier(0.3, 0, 0.2, 1); } .sg-ptr.sg-ptr--dragging { transition: none; } .sg-ptr__icon { width: 18px; height: 18px; color: var(--sg-accent); display: flex; align-items: center; justify-content: center; transform: rotate(0deg); } .sg-ptr__icon svg { width: 100%; height: 100%; } .sg-ptr--loading .sg-ptr__icon { animation: sg-ptr-spin 0.8s linear infinite; } @keyframes sg-ptr-spin { 100% { transform: rotate(360deg); } }