KALAMUS | Premium Stationery & Office Supplies<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n navy: '#0B1B3D',\n navyLight: '#1E2D56',\n yellow: '#FFC72C',\n grayLight: '#F8F9FA',\n grayBorder: '#E5E7EB'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }\n .no-scrollbar::-webkit-scrollbar { display: none; }\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n <\/style>\n<\/head>\n<body class=\"bg-white text-brand-navy antialiased\">\n\n \n <header class=\"w-full border-b border-brand-grayBorder sticky top-0 bg-white z-50\">\n \n <div class=\"max-w-7xl mx-auto px-6 h-20 flex items-center justify-between gap-8\">\n \n \n <a href=\"#\" class=\"text-2xl font-bold tracking-widest text-brand-navy flex-shrink-0\">\n KALAMUS<span class=\"text-brand-yellow\">.<\/span>\n <\/a>\n\n \n <div class=\"flex-1 max-w-2xl relative\">\n <input type=\"text\" placeholder=\"Search premium notebooks, office tech, fine pens...\" class=\"w-full h-11 pl-11 pr-4 bg-brand-grayLight border border-brand-grayBorder rounded text-sm focus:outline-none focus:border-brand-navy transition-colors placeholder:text-gray-400\">\n <i data-lucide=\"search\" class=\"absolute left-4 top-3.5 text-gray-400 w-4 h-4\"><\/i>\n <\/div>\n\n \n <div class=\"flex items-center gap-6 flex-shrink-0\">\n <a href=\"#\" class=\"flex items-center gap-2 text-sm font-medium hover:text-brand-navyLight transition-colors\">\n <i data-lucide=\"user\" class=\"w-5 h-5 text-brand-navy\"><\/i>\n <span class=\"hidden lg:inline\">Account<\/span>\n <\/a>\n <a href=\"#\" class=\"flex items-center gap-2 text-sm font-medium hover:text-brand-navyLight transition-colors relative\">\n <div class=\"relative\">\n <i data-lucide=\"shopping-bag\" class=\"w-5 h-5 text-brand-navy\"><\/i>\n <span class=\"absolute -top-1.5 -right-1.5 bg-brand-yellow text-brand-navy text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center\">0<\/span>\n <\/div>\n <span class=\"hidden lg:inline\">Cart<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n \n <nav class=\"w-full border-t border-brand-grayBorder bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <ul class=\"flex items-center justify-start gap-8 h-12 overflow-x-auto no-scrollbar whitespace-nowrap text-xs font-semibold uppercase tracking-wider text-gray-600\">\n <li><a href=\"#\" class=\"text-brand-navy border-b-2 border-brand-navy py-3.5\">Home<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Shop<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">School Supplies<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Office Supplies<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Arts & Crafts<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Printing & Services<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Wholesale<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">About Us<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Contact<\/a><\/li>\n <\/ul>\n <\/div>\n <\/nav>\n <\/header>\n\n \n <section class=\"w-full bg-brand-grayLight border-b border-brand-grayBorder overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 items-center min-h-[540px] gap-12 py-12 lg:py-0\">\n \n <div class=\"lg:col-span-5 flex flex-col justify-center items-start\">\n <span class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-3\">Premium Workspace & Education Essentials<\/span>\n <h1 class=\"text-4xl lg:text-5xl font-bold tracking-tight text-brand-navy leading-[1.1] mb-6\">\n Everything You Need for School, Office & Creativity\n <\/h1>\n <p class=\"text-sm text-gray-500 max-w-md mb-8 leading-relaxed\">\n Elevate your daily productivity and creative projects with precision-engineered stationery, corporate supplies, and professional printing solutions.\n <\/p>\n <div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"bg-brand-navy text-white text-xs font-bold uppercase tracking-wider px-7 py-4 rounded hover:bg-brand-navyLight transition-all flex items-center gap-2\">\n Shop Collection <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#\" class=\"border-2 border-brand-navy text-brand-navy text-xs font-bold uppercase tracking-wider px-7 py-4 rounded hover:bg-brand-navy hover:text-white transition-all\">\n Corporate Solutions\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-7 h-full min-h-[350px] lg:min-h-[540px] relative flex items-center justify-center\">\n \n <div class=\"absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#0B1B3D_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n \n \n <div class=\"relative w-full max-w-lg h-[400px] bg-white rounded-lg shadow-sm border border-brand-grayBorder p-8 flex flex-col justify-between overflow-hidden\">\n <div class=\"flex justify-between items-start\">\n <div class=\"w-32 h-44 bg-brand-navy rounded shadow-md flex flex-col justify-between p-4 text-white\">\n <div class=\"w-6 h-0.5 bg-brand-yellow\"><\/div>\n <span class=\"text-[10px] font-mono opacity-40\">KALAMUS NOTEBOOK<\/span>\n <\/div>\n <div class=\"w-48 h-32 bg-gray-100 rounded border border-brand-grayBorder relative flex items-center justify-center\">\n <span class=\"text-[10px] uppercase font-bold tracking-wider text-gray-400\">Scientific Calculator<\/span>\n <\/div>\n <\/div>\n <div class=\"flex items-end justify-between gap-4 mt-4\">\n <div class=\"flex gap-2\">\n <div class=\"w-3 h-28 bg-brand-yellow rounded-t shadow-sm\"><\/div>\n <div class=\"w-3 h-32 bg-brand-navy rounded-t shadow-sm\"><\/div>\n <div class=\"w-3 h-24 bg-gray-300 rounded-t shadow-sm\"><\/div>\n <\/div>\n <div class=\"flex-1 h-24 bg-gray-50 border border-dashed border-gray-300 rounded flex items-center justify-center\">\n <span class=\"text-[11px] text-gray-400 font-medium\">Fine-Liner Ink Pens & Markers<\/span>\n <\/div>\n <\/div>\n \n <div class=\"absolute bottom-6 right-6 bg-brand-yellow text-brand-navy text-[11px] font-bold tracking-wider uppercase px-3 py-1.5 rounded shadow-sm\">\n 2026 Catalog\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full border-b border-brand-grayBorder py-8 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-6 lg:gap-8\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"shield-check\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Genuine Products<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">100% Certified Brands<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"tags\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Competitive Prices<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Direct Retail & Wholesale pricing<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"truck\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Fast Delivery<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Expedited fulfillment tracking<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"credit-card\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Secure Payments<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Encrypted merchant gateways<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full py-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex justify-between items-baseline mb-8\">\n <h2 class=\"text-xl font-bold uppercase tracking-wider\">Shop by Core Department<\/h2>\n <a href=\"#\" class=\"text-xs font-bold text-brand-navy tracking-wider uppercase border-b border-brand-navy pb-0.5 hover:text-brand-navyLight transition-colors\">View All Categories<\/a>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"book-open\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">School Supplies<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"briefcase\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Office Supplies<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"palette\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Art Materials<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"printer\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Printing & Services<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full pb-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"bg-brand-navy text-white rounded p-8 flex flex-col justify-between items-start min-h-[240px] relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-[0.02] bg-[radial-gradient(#FFF_1px,transparent_1px)] [background-size:12px_12px]\"><\/div>\n <div class=\"max-w-xs z-10\">\n <span class=\"text-[10px] font-bold tracking-widest text-brand-yellow uppercase block mb-2\">Seasonal Catalog<\/span>\n <h3 class=\"text-xl font-bold uppercase tracking-tight mb-3\">Back To School Collection<\/h3>\n <p class=\"text-xs text-gray-400 leading-relaxed\">Premium curated utility packs, ergonomic backpacks, and durable archival instruments engineered for modern academia.<\/p>\n <\/div>\n <a href=\"#\" class=\"mt-6 text-xs font-bold uppercase tracking-wider bg-white text-brand-navy px-5 py-3 rounded hover:bg-brand-yellow hover:text-brand-navy transition-all z-10\">Explore Collection<\/a>\n <\/div>\n\n \n <div class=\"bg-brand-grayLight border border-brand-grayBorder rounded p-8 flex flex-col justify-between items-start min-h-[240px] relative overflow-hidden\">\n <div class=\"max-w-xs z-10\">\n <span class=\"text-[10px] font-bold tracking-widest text-gray-400 uppercase block mb-2\">B2B Institutional Procurement<\/span>\n <h3 class=\"text-xl font-bold uppercase tracking-tight mb-3 text-brand-navy\">Wholesale Solutions for Schools & Businesses<\/h3>\n <p class=\"text-xs text-gray-500 leading-relaxed\">Streamlined bulk accounts, consolidated dynamic custom quoting, multi-office accounts, and rapid fulfillment cycles.<\/p>\n <\/div>\n <a href=\"#\" class=\"mt-6 text-xs font-bold uppercase tracking-wider bg-brand-navy text-white px-5 py-3 rounded hover:bg-brand-navyLight transition-all z-10\">Apply for Wholesale<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full pb-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex justify-between items-baseline mb-8\">\n <h2 class=\"text-xl font-bold uppercase tracking-wider\">Best Sellers<\/h2>\n <div class=\"flex gap-2\">\n <button class=\"w-8 h-8 rounded border border-brand-grayBorder flex items-center justify-center hover:bg-brand-grayLight transition-colors text-brand-navy\"><i data-lucide=\"arrow-left\" class=\"w-4 h-4\"><\/i><\/button>\n <button class=\"w-8 h-8 rounded border border-brand-grayBorder flex items-center justify-center hover:bg-brand-grayLight transition-colors text-brand-navy\"><i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <span class=\"absolute top-3 left-3 bg-brand-navy text-white text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded\">Top Seller<\/span>\n <div class=\"w-24 h-32 bg-brand-navy rounded shadow-sm opacity-90 group-hover:scale-105 transition-transform duration-300\"><\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Notebooks<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Premium Minimalist A5 Hardcover Journal<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$18.50<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-28 h-20 bg-gray-300 border border-brand-grayBorder rounded flex items-center justify-center group-hover:scale-105 transition-transform duration-300\">\n <span class=\"text-[9px] text-gray-500 font-mono\">LCD PANEL<\/span>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Office Tech<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Advanced Financial Scientific Calculator<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$34.00<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-20 h-28 bg-white border border-brand-grayBorder rounded shadow-sm relative p-2 flex flex-col justify-between group-hover:scale-105 transition-transform duration-300\">\n <div class=\"w-full h-2 bg-brand-yellow rounded-xs\"><\/div>\n <div class=\"w-full h-1 bg-gray-200 rounded-xs\"><\/div>\n <div class=\"w-full h-1 bg-gray-200 rounded-xs\"><\/div>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Fine Writing<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Ergonomic Archival Gel Pens (0.5mm, 12-Pack)<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$14.95<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-24 h-24 rounded-full bg-brand-navy\/5 border border-brand-navy\/10 flex items-center justify-center group-hover:scale-105 transition-transform duration-300\">\n <i data-lucide=\"layers\" class=\"w-8 h-8 text-brand-navy opacity-40\"><\/i>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Paper Products<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Ultra-White Multifunction Laser Printer Paper (Ream)<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$9.20<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full py-12 bg-brand-grayLight border-t border-b border-brand-grayBorder\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-wrap items-center justify-between gap-8 opacity-40 filter grayscale\">\n <span class=\"text-sm font-bold tracking-widest uppercase\">STAEDTLER<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">ROTring<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">FABER-CASTELL<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">MOLESKINE<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">PILOT<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">3M SCOTCH<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"w-full bg-brand-navy text-white pt-16 pb-8 border-t-4 border-brand-yellow\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-white\/10\">\n \n \n <div class=\"lg:col-span-2\">\n <a href=\"#\" class=\"text-xl font-bold tracking-widest text-white block mb-4\">\n KALAMUS<span class=\"text-brand-yellow\">.<\/span>\n <\/a>\n <p class=\"text-xs text-gray-400 max-w-sm leading-relaxed mb-6\">\n Premium enterprise corporate office supplies and retail scholastic assets built to maintain workspace functionality. Fully optimized catalog fulfillment for corporate systems.\n <\/p>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"facebook\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"instagram\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a>\n <\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Quick Links<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Catalog Index<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">School Procurement<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Office Essentials<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Fine Art Materials<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Specialty Sales<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Customer Service<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Shipping Framework<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Returns & Refunds<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Secure Checkout API<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Account Interface<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Support Center<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Wholesale Solutions<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">B2B Portal Access<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Institutional Pricing<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Bulk Order Surcharges<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Custom Printing Inquiries<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Corporate Contracts<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"max-w-7xl mx-auto px-6 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <div class=\"flex flex-col md:flex-row items-center gap-2 md:gap-6 text-[11px] text-gray-400\">\n <span class=\"text-gray-500\">© 2026 KALAMUS Retailers Inc. All Rights Reserved.<\/span>\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy<\/a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Procurement<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"flex items-center gap-6 text-[11px] text-gray-400\">\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"phone\" class=\"w-3.5 h-3.5 text-brand-yellow\"><\/i>\n <span>+1 (800) 555-0199<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"mail\" class=\"w-3.5 h-3.5 text-brand-yellow\"><\/i>\n <span>corporate@kalamus-supplies.com<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n lucide.createIcons();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>KALAMUS | Premium Stationery & Office Supplies KALAMUS. Account 0 Cart Home Shop School Supplies Office Supplies Arts & Crafts Printing & Services Wholesale About Us Contact Premium Workspace & Education Essentials Everything You Need for School, Office & Creativity Elevate your daily productivity and creative projects with precision-engineered stationery, corporate supplies, and professional printing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":1,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":28,"date":"2026-06-08T16:28:10","date_gmt":"2026-06-08T16:28:10","guid":{"rendered":"https:\/\/kalamus-lb.com\/?page_id=28"},"modified":"2026-06-08T16:28:13","modified_gmt":"2026-06-08T16:28:13","slug":"html-page","status":"publish","type":"page","link":"https:\/\/kalamus-lb.com\/?page_id=28","title":{"rendered":"Html Page"},"content":{"rendered":"\n\n\n\n \n \n KALAMUS | Premium Stationery & Office Supplies<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n navy: '#0B1B3D',\n navyLight: '#1E2D56',\n yellow: '#FFC72C',\n grayLight: '#F8F9FA',\n grayBorder: '#E5E7EB'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }\n .no-scrollbar::-webkit-scrollbar { display: none; }\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n <\/style>\n<\/head>\n<body class=\"bg-white text-brand-navy antialiased\">\n\n \n <header class=\"w-full border-b border-brand-grayBorder sticky top-0 bg-white z-50\">\n \n <div class=\"max-w-7xl mx-auto px-6 h-20 flex items-center justify-between gap-8\">\n \n \n <a href=\"#\" class=\"text-2xl font-bold tracking-widest text-brand-navy flex-shrink-0\">\n KALAMUS<span class=\"text-brand-yellow\">.<\/span>\n <\/a>\n\n \n <div class=\"flex-1 max-w-2xl relative\">\n <input type=\"text\" placeholder=\"Search premium notebooks, office tech, fine pens...\" class=\"w-full h-11 pl-11 pr-4 bg-brand-grayLight border border-brand-grayBorder rounded text-sm focus:outline-none focus:border-brand-navy transition-colors placeholder:text-gray-400\">\n <i data-lucide=\"search\" class=\"absolute left-4 top-3.5 text-gray-400 w-4 h-4\"><\/i>\n <\/div>\n\n \n <div class=\"flex items-center gap-6 flex-shrink-0\">\n <a href=\"#\" class=\"flex items-center gap-2 text-sm font-medium hover:text-brand-navyLight transition-colors\">\n <i data-lucide=\"user\" class=\"w-5 h-5 text-brand-navy\"><\/i>\n <span class=\"hidden lg:inline\">Account<\/span>\n <\/a>\n <a href=\"#\" class=\"flex items-center gap-2 text-sm font-medium hover:text-brand-navyLight transition-colors relative\">\n <div class=\"relative\">\n <i data-lucide=\"shopping-bag\" class=\"w-5 h-5 text-brand-navy\"><\/i>\n <span class=\"absolute -top-1.5 -right-1.5 bg-brand-yellow text-brand-navy text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center\">0<\/span>\n <\/div>\n <span class=\"hidden lg:inline\">Cart<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n \n <nav class=\"w-full border-t border-brand-grayBorder bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <ul class=\"flex items-center justify-start gap-8 h-12 overflow-x-auto no-scrollbar whitespace-nowrap text-xs font-semibold uppercase tracking-wider text-gray-600\">\n <li><a href=\"#\" class=\"text-brand-navy border-b-2 border-brand-navy py-3.5\">Home<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Shop<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">School Supplies<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Office Supplies<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Arts & Crafts<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Printing & Services<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Wholesale<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">About Us<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-brand-navy transition-colors py-3.5\">Contact<\/a><\/li>\n <\/ul>\n <\/div>\n <\/nav>\n <\/header>\n\n \n <section class=\"w-full bg-brand-grayLight border-b border-brand-grayBorder overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 items-center min-h-[540px] gap-12 py-12 lg:py-0\">\n \n <div class=\"lg:col-span-5 flex flex-col justify-center items-start\">\n <span class=\"text-xs font-bold uppercase tracking-widest text-gray-400 mb-3\">Premium Workspace & Education Essentials<\/span>\n <h1 class=\"text-4xl lg:text-5xl font-bold tracking-tight text-brand-navy leading-[1.1] mb-6\">\n Everything You Need for School, Office & Creativity\n <\/h1>\n <p class=\"text-sm text-gray-500 max-w-md mb-8 leading-relaxed\">\n Elevate your daily productivity and creative projects with precision-engineered stationery, corporate supplies, and professional printing solutions.\n <\/p>\n <div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"bg-brand-navy text-white text-xs font-bold uppercase tracking-wider px-7 py-4 rounded hover:bg-brand-navyLight transition-all flex items-center gap-2\">\n Shop Collection <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#\" class=\"border-2 border-brand-navy text-brand-navy text-xs font-bold uppercase tracking-wider px-7 py-4 rounded hover:bg-brand-navy hover:text-white transition-all\">\n Corporate Solutions\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-7 h-full min-h-[350px] lg:min-h-[540px] relative flex items-center justify-center\">\n \n <div class=\"absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#0B1B3D_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n \n \n <div class=\"relative w-full max-w-lg h-[400px] bg-white rounded-lg shadow-sm border border-brand-grayBorder p-8 flex flex-col justify-between overflow-hidden\">\n <div class=\"flex justify-between items-start\">\n <div class=\"w-32 h-44 bg-brand-navy rounded shadow-md flex flex-col justify-between p-4 text-white\">\n <div class=\"w-6 h-0.5 bg-brand-yellow\"><\/div>\n <span class=\"text-[10px] font-mono opacity-40\">KALAMUS NOTEBOOK<\/span>\n <\/div>\n <div class=\"w-48 h-32 bg-gray-100 rounded border border-brand-grayBorder relative flex items-center justify-center\">\n <span class=\"text-[10px] uppercase font-bold tracking-wider text-gray-400\">Scientific Calculator<\/span>\n <\/div>\n <\/div>\n <div class=\"flex items-end justify-between gap-4 mt-4\">\n <div class=\"flex gap-2\">\n <div class=\"w-3 h-28 bg-brand-yellow rounded-t shadow-sm\"><\/div>\n <div class=\"w-3 h-32 bg-brand-navy rounded-t shadow-sm\"><\/div>\n <div class=\"w-3 h-24 bg-gray-300 rounded-t shadow-sm\"><\/div>\n <\/div>\n <div class=\"flex-1 h-24 bg-gray-50 border border-dashed border-gray-300 rounded flex items-center justify-center\">\n <span class=\"text-[11px] text-gray-400 font-medium\">Fine-Liner Ink Pens & Markers<\/span>\n <\/div>\n <\/div>\n \n <div class=\"absolute bottom-6 right-6 bg-brand-yellow text-brand-navy text-[11px] font-bold tracking-wider uppercase px-3 py-1.5 rounded shadow-sm\">\n 2026 Catalog\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full border-b border-brand-grayBorder py-8 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-6 lg:gap-8\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"shield-check\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Genuine Products<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">100% Certified Brands<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"tags\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Competitive Prices<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Direct Retail & Wholesale pricing<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"truck\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Fast Delivery<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Expedited fulfillment tracking<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-10 h-10 bg-brand-grayLight rounded flex items-center justify-center flex-shrink-0 text-brand-navy\">\n <i data-lucide=\"credit-card\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-wider\">Secure Payments<\/h4>\n <p class=\"text-[11px] text-gray-400 mt-0.5\">Encrypted merchant gateways<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full py-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex justify-between items-baseline mb-8\">\n <h2 class=\"text-xl font-bold uppercase tracking-wider\">Shop by Core Department<\/h2>\n <a href=\"#\" class=\"text-xs font-bold text-brand-navy tracking-wider uppercase border-b border-brand-navy pb-0.5 hover:text-brand-navyLight transition-colors\">View All Categories<\/a>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"book-open\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">School Supplies<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"briefcase\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Office Supplies<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"palette\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Art Materials<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n \n <a href=\"#\" class=\"group relative block bg-brand-grayLight rounded overflow-hidden border border-brand-grayBorder transition-all duration-300 hover:shadow-md\">\n <div class=\"h-48 flex items-center justify-center p-6 relative\">\n <i data-lucide=\"printer\" class=\"w-14 h-14 text-brand-navy opacity-20 group-hover:scale-110 transition-transform duration-300\"><\/i>\n <\/div>\n <div class=\"p-4 bg-white border-t border-brand-grayBorder flex justify-between items-center\">\n <span class=\"text-xs font-bold uppercase tracking-wider text-brand-navy\">Printing & Services<\/span>\n <i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-gray-400 group-hover:text-brand-navy transition-colors\"><\/i>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full pb-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"bg-brand-navy text-white rounded p-8 flex flex-col justify-between items-start min-h-[240px] relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-[0.02] bg-[radial-gradient(#FFF_1px,transparent_1px)] [background-size:12px_12px]\"><\/div>\n <div class=\"max-w-xs z-10\">\n <span class=\"text-[10px] font-bold tracking-widest text-brand-yellow uppercase block mb-2\">Seasonal Catalog<\/span>\n <h3 class=\"text-xl font-bold uppercase tracking-tight mb-3\">Back To School Collection<\/h3>\n <p class=\"text-xs text-gray-400 leading-relaxed\">Premium curated utility packs, ergonomic backpacks, and durable archival instruments engineered for modern academia.<\/p>\n <\/div>\n <a href=\"#\" class=\"mt-6 text-xs font-bold uppercase tracking-wider bg-white text-brand-navy px-5 py-3 rounded hover:bg-brand-yellow hover:text-brand-navy transition-all z-10\">Explore Collection<\/a>\n <\/div>\n\n \n <div class=\"bg-brand-grayLight border border-brand-grayBorder rounded p-8 flex flex-col justify-between items-start min-h-[240px] relative overflow-hidden\">\n <div class=\"max-w-xs z-10\">\n <span class=\"text-[10px] font-bold tracking-widest text-gray-400 uppercase block mb-2\">B2B Institutional Procurement<\/span>\n <h3 class=\"text-xl font-bold uppercase tracking-tight mb-3 text-brand-navy\">Wholesale Solutions for Schools & Businesses<\/h3>\n <p class=\"text-xs text-gray-500 leading-relaxed\">Streamlined bulk accounts, consolidated dynamic custom quoting, multi-office accounts, and rapid fulfillment cycles.<\/p>\n <\/div>\n <a href=\"#\" class=\"mt-6 text-xs font-bold uppercase tracking-wider bg-brand-navy text-white px-5 py-3 rounded hover:bg-brand-navyLight transition-all z-10\">Apply for Wholesale<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full pb-16 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex justify-between items-baseline mb-8\">\n <h2 class=\"text-xl font-bold uppercase tracking-wider\">Best Sellers<\/h2>\n <div class=\"flex gap-2\">\n <button class=\"w-8 h-8 rounded border border-brand-grayBorder flex items-center justify-center hover:bg-brand-grayLight transition-colors text-brand-navy\"><i data-lucide=\"arrow-left\" class=\"w-4 h-4\"><\/i><\/button>\n <button class=\"w-8 h-8 rounded border border-brand-grayBorder flex items-center justify-center hover:bg-brand-grayLight transition-colors text-brand-navy\"><i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <span class=\"absolute top-3 left-3 bg-brand-navy text-white text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded\">Top Seller<\/span>\n <div class=\"w-24 h-32 bg-brand-navy rounded shadow-sm opacity-90 group-hover:scale-105 transition-transform duration-300\"><\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Notebooks<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Premium Minimalist A5 Hardcover Journal<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$18.50<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-28 h-20 bg-gray-300 border border-brand-grayBorder rounded flex items-center justify-center group-hover:scale-105 transition-transform duration-300\">\n <span class=\"text-[9px] text-gray-500 font-mono\">LCD PANEL<\/span>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Office Tech<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Advanced Financial Scientific Calculator<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$34.00<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-20 h-28 bg-white border border-brand-grayBorder rounded shadow-sm relative p-2 flex flex-col justify-between group-hover:scale-105 transition-transform duration-300\">\n <div class=\"w-full h-2 bg-brand-yellow rounded-xs\"><\/div>\n <div class=\"w-full h-1 bg-gray-200 rounded-xs\"><\/div>\n <div class=\"w-full h-1 bg-gray-200 rounded-xs\"><\/div>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Fine Writing<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Ergonomic Archival Gel Pens (0.5mm, 12-Pack)<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$14.95<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"group border border-brand-grayBorder rounded overflow-hidden flex flex-col justify-between bg-white hover:shadow-sm transition-all duration-300\">\n <div class=\"p-4 bg-brand-grayLight h-52 flex items-center justify-center relative\">\n <div class=\"w-24 h-24 rounded-full bg-brand-navy\/5 border border-brand-navy\/10 flex items-center justify-center group-hover:scale-105 transition-transform duration-300\">\n <i data-lucide=\"layers\" class=\"w-8 h-8 text-brand-navy opacity-40\"><\/i>\n <\/div>\n <\/div>\n <div class=\"p-4 border-t border-brand-grayBorder flex flex-col justify-between flex-1\">\n <div>\n <span class=\"text-[10px] text-gray-400 font-medium uppercase tracking-wider block mb-1\">Paper Products<\/span>\n <a href=\"#\" class=\"text-xs font-bold tracking-tight text-brand-navy hover:text-brand-navyLight block line-clamp-2 min-h-[32px]\">Ultra-White Multifunction Laser Printer Paper (Ream)<\/a>\n <\/div>\n <div class=\"flex justify-between items-center mt-4 pt-2 border-t border-dashed border-brand-grayBorder\">\n <span class=\"text-sm font-bold text-brand-navy\">$9.20<\/span>\n <button class=\"w-8 h-8 bg-brand-grayLight border border-brand-grayBorder rounded flex items-center justify-center text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow transition-all duration-200\">\n <i data-lucide=\"shopping-cart\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"w-full py-12 bg-brand-grayLight border-t border-b border-brand-grayBorder\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-wrap items-center justify-between gap-8 opacity-40 filter grayscale\">\n <span class=\"text-sm font-bold tracking-widest uppercase\">STAEDTLER<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">ROTring<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">FABER-CASTELL<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">MOLESKINE<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">PILOT<\/span>\n <span class=\"text-sm font-bold tracking-widest uppercase\">3M SCOTCH<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"w-full bg-brand-navy text-white pt-16 pb-8 border-t-4 border-brand-yellow\">\n <div class=\"max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-white\/10\">\n \n \n <div class=\"lg:col-span-2\">\n <a href=\"#\" class=\"text-xl font-bold tracking-widest text-white block mb-4\">\n KALAMUS<span class=\"text-brand-yellow\">.<\/span>\n <\/a>\n <p class=\"text-xs text-gray-400 max-w-sm leading-relaxed mb-6\">\n Premium enterprise corporate office supplies and retail scholastic assets built to maintain workspace functionality. Fully optimized catalog fulfillment for corporate systems.\n <\/p>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"facebook\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"instagram\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-brand-yellow transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a>\n <\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Quick Links<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Catalog Index<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">School Procurement<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Office Essentials<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Fine Art Materials<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Specialty Sales<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Customer Service<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Shipping Framework<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Returns & Refunds<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Secure Checkout API<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Account Interface<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Support Center<\/a><\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h4 class=\"text-xs font-bold uppercase tracking-widest text-brand-yellow mb-4\">Wholesale Solutions<\/h4>\n <ul class=\"space-y-2.5 text-xs text-gray-400\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">B2B Portal Access<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Institutional Pricing<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Bulk Order Surcharges<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Custom Printing Inquiries<\/a><\/li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Corporate Contracts<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div class=\"max-w-7xl mx-auto px-6 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <div class=\"flex flex-col md:flex-row items-center gap-2 md:gap-6 text-[11px] text-gray-400\">\n <span class=\"text-gray-500\">© 2026 KALAMUS Retailers Inc. All Rights Reserved.<\/span>\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy<\/a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Procurement<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"flex items-center gap-6 text-[11px] text-gray-400\">\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"phone\" class=\"w-3.5 h-3.5 text-brand-yellow\"><\/i>\n <span>+1 (800) 555-0199<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <i data-lucide=\"mail\" class=\"w-3.5 h-3.5 text-brand-yellow\"><\/i>\n <span>corporate@kalamus-supplies.com<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n lucide.createIcons();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>KALAMUS | Premium Stationery & Office Supplies KALAMUS. Account 0 Cart Home Shop School Supplies Office Supplies Arts & Crafts Printing & Services Wholesale About Us Contact Premium Workspace & Education Essentials Everything You Need for School, Office & Creativity Elevate your daily productivity and creative projects with precision-engineered stationery, corporate supplies, and professional printing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":1,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/kalamus-lb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}