/* Line... */ .line { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 2px ; } /* Arial Unicode FONT... */ .ff_AU0 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 8px ; } .ff_AU1 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 10px ; } .ff_AU2 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 12px ; } .ff_AU3 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 14px ; } .ff_AU4 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 18px ; } .ff_AU5 { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 22px ; } .ff_LAU { font-family: "Arial Unicode", "_ߎckўԚ", Helvetica, sans-serif ; font-size: 36px ; color:#408050 ; } /* Arial & Helvetica FONT FAMILY... */ .ff_A0 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 8px ; } .ff_A1 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 10px ; } .ff_A2 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 12px ; } .ff_A3 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 14px ; } .ff_A4 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 18px ; } .ff_A5 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 22px ; } .ff_LA1 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 24px ; color:#808080 ; } .ff_LA2 { font-family: Arial, Helvetica, sans-serif, "Arial Unicode", "_ߎckўԚ" ; font-size: 36px ; color:#408050 ; } /* Ming [0}fԚ] FONT FAMILY... */ .ff_Ming { font-family: "e0}fԚ", "0}fԚ", Mingliu ; } /* Times & Ming FONT FAMILY... */ .ff_T0 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 9px ; } .ff_T1 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 11px ; } .ff_T2 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 13px ; } .ff_T3 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 16px ; } .ff_T4 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 20px ; } .ff_T5 { font-family: "Times New Roman", Times, Garamond, "e0}fԚ", "0}fԚ", Mingliu ; font-size: 24px ; } /* Kai [wifԚ] FONT FAMILY... */ .ff_Kai { font-family: "jwiԚ" ; } /* ------------------------------------------------------------------ */ /* Change FONT COLOR... */ .fc_wht { color:#ffffff ; } .fc_red { color:#ff0020 ; } .fc_grn { color:#00ff20 ; } .fc_blu { color:#2000ff ; } /* ------------------------------------------------------------------ */ /* Change FONT BACKGROUND COLOR... */ .fbg_wht { background-color:#ffffff ; } .fbg_red { background-color:#ff0020 ; } .fbg_grn { background-color:#00ff20 ; } .fbg_blu { background-color:#2000ff ; } /* ========================= Responsive layout additions (v4) - Mobile order: title+address then principal/consultant - Enforces requested heading colours using RGB values ========================= */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: clamp(12px, 3vw, 28px); background: #f0f0d0; } img { max-width: 100%; height: auto; } .page { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; } .frame { width: 100%; max-width: 930px; background-color: #906030; background-image: url('brown.frame.png'); border: 3px solid #6f4522; padding: clamp(8px, 2vw, 14px); } .inner { background: #ffffff; border: 2px solid #000000; } .hero { background-color: #808080; background-image: url('bg.png'); padding: clamp(12px, 3vw, 22px); } .hero__grid { display: flex; gap: clamp(12px, 3vw, 24px); align-items: stretch; } .hero__left { flex: 1 1 480px; min-width: 260px; } .hero__right { flex: 0 1 320px; min-width: 240px; display: flex; align-items: flex-end; } .lineSpacer { margin: 10px 0 14px; } .brandLine { margin: 10px 0 0; } .addressBlock { margin-top: clamp(14px, 4vw, 34px); } .bar { display: block; max-width: 420px; } .since { text-align: center; margin: 14px 0 0; } /* Fluid typography for small screens (colour unchanged below) */ .ff_LAU { font-size: clamp(22px, 5vw, 36px); } .ff_LA2 { font-size: clamp(22px, 5vw, 36px); } .ff_LA1 { font-size: clamp(16px, 3.4vw, 24px); } .ff_A4 { font-size: clamp(15px, 3vw, 18px); } .ff_A3 { font-size: clamp(13px, 2.6vw, 14px); } .ff_AU4 { font-size: clamp(14px, 3.2vw, 18px); } .ff_AU3 { font-size: clamp(12px, 2.8vw, 14px); } .ff_AU2 { font-size: clamp(12px, 2.8vw, 12px); } /* Mobile stacking: principal/consultant BELOW the title+address */ @media (max-width: 720px) { .hero__grid { flex-direction: column; } .hero__right { align-items: flex-start; } .bar { max-width: 100%; } } @media print { body { background: #fff; padding: 0; } .page { min-height: auto; } .frame { border: 1px solid #333; background-image: none; } .hero { background-image: none; } } /* ========================= Colour overrides (requested) ========================= */ .ff_LAU { color: rgb(64, 128, 80); } /* 陳 建 田 律 師 行 */ .ff_LA2 { color: rgb(64, 128, 80); } /* K. T. CHAN & CO. */ .ff_LA1 { color: rgb(128, 128, 128); } /* SOLICITORS */